Как мне добавить боковую панель вправо?

Question

В Wordpress У меня есть боковая панель с виджетами WooCommerce внутри нее. Я пытаюсь заставить его плавать вправо, что отлично работает с оператором float: right, но поскольку я хочу, чтобы боковая панель прокручивалась вместе со страницей, я использую оператор position: fixed, но это автоматически вытягивает его влево.

Что нужно добавить, чтобы сделать боковую панель справа?

P.S. при просмотре HTML, Javascript/PHP отмечают, что это собственные команды Wordpress/Woocommerce.

CSS:

#secondary { 
    position: fixed; 
    float: right; 
    padding: 15px; 
    margin-right: 15px; 
    z-index: 1000; 
    top: 91px; 
    height: 350px; 
    width: 250px; 
    text-align: center; 
    background-color: #e6e6e6; 
    overflow-y: auto; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

HTML:

<aside id="secondary" class="widget-area" role="complementary"> 
    <?php dynamic_sidebar('sidebar-1'); ?> 
</aside><!-- #secondary --> 

PHP/Javascript:

<?php do_action('woocommerce_before_mini_cart'); ?> 

<ul class="cart_list product_list_widget <?php echo $args['list_class']; ?>"> 

    <?php if (! WC()->cart->is_empty()) : ?> 

     <?php 
      foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item) { 
       $_product  = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key); 
       $product_id = apply_filters('woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key); 

       if ($_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters('woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key)) { 

        $product_name = apply_filters('woocommerce_cart_item_name', $_product->get_title(), $cart_item, $cart_item_key); 
        $thumbnail  = apply_filters('woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key); 
        $product_price = apply_filters('woocommerce_cart_item_price', WC()->cart->get_product_price($_product), $cart_item, $cart_item_key); 
        ?> 
        <li class="<?php echo esc_attr(apply_filters('woocommerce_mini_cart_item_class', 'mini_cart_item', $cart_item, $cart_item_key)); ?>"> 
         <?php 
         echo apply_filters('woocommerce_cart_item_remove_link', sprintf(
          '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>', 
          esc_url(WC()->cart->get_remove_url($cart_item_key)), 
          __('Remove this item', 'woocommerce'), 
          esc_attr($product_id), 
          esc_attr($_product->get_sku()) 
         ), $cart_item_key); 
         ?> 
         <?php if (! $_product->is_visible()) : ?> 
          <?php echo str_replace(array('http:', 'https:'), '', $thumbnail) . $product_name . '&nbsp;'; ?> 
         <?php else : ?> 
          <a href="<?php echo esc_url($_product->get_permalink($cart_item)); ?>"> 
           <?php echo str_replace(array('http:', 'https:'), '', $thumbnail) . $product_name . '&nbsp;'; ?> 
          </a> 
         <?php endif; ?> 
         <?php echo WC()->cart->get_item_data($cart_item); ?> 

         <?php echo apply_filters('woocommerce_widget_cart_item_quantity', '<span class="quantity">' . sprintf('%s &times; %s', $cart_item['quantity'], $product_price) . '</span>', $cart_item, $cart_item_key); ?> 
        </li> 
        <?php 
       } 
      } 
     ?> 

    <?php else : ?> 

     <li class="empty"><?php _e('No products in the cart.', 'woocommerce'); ?></li> 

    <?php endif; ?> 

</ul><!-- end product list --> 

<?php if (! WC()->cart->is_empty()) : ?> 

    <p class="total"><strong><?php _e('Total', 'woocommerce'); ?>:</strong> <?php echo WC()->cart->get_cart_subtotal(); ?></p> 

    <?php do_action('woocommerce_widget_shopping_cart_before_buttons'); ?> 

    <p class="buttons"> 
     <!-- <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="button wc-forward"><?php _e('View Cart', 'woocommerce'); ?></a> --> 
     <a href="<?php echo esc_url(wc_get_checkout_url()); ?>" class="btn btn-default" id="minicart-btn"><?php _e('Checkout', 'woocommerce'); ?></a> 
    </p> 

<?php endif; ?> 

<?php do_action('woocommerce_after_mini_cart'); ?> 

Answer 1

Если вам нужна боковая панель для крепления к правой части страницы, вы можете используйте свойство right вместе с фиксированным позиционированием:

right: 0px; 

float не будет работать с элементом fixed.

Answer 2

Положение фиксированное и плавающее право не может использоваться вместе. Используйте право: 0, чтобы фиксированный элемент оставался с правой стороны.

Answer 3

вы должны создать BFC в CSS. Вы можете получить информацию о BFC ниже CSS 101: Block Formatting Contexts