如何讓我的側邊欄向右側漂浮？

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/Java腳本：

<?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

你應該先看看CSS中的BFC。 你可以得到BFC的信息 CSS 101: Block Formatting Contexts