CSS在X軸上的固定位置，但在Y軸上爲絕對位置？

我的貨櫃，#topmenu處於固定位置。我只是添加了一個電話號碼（圖片），我想用此欄移動，但它不隨固定欄移動。CSS在X軸上的固定位置，但在Y軸上爲絕對位置？

我已經完全將它定位在一個相對定位的元素內，但它並不堅持。

如果我只是讓電話號碼位置：固定，那麼它隨着視口寬度移動。什麼是最好的方式來完成我在做什麼？

CSS片段：

.topsocial a { margin-left: 15px; } 
#topmenu {position:fixed; z-index:220; } 
#topmenu .ktwrap {padding-top: 3px; padding-bottom: 3px; color: #fff;} 
#topmenu ul li { display:inline; list-style-type: none; padding: 0px 10px 0 0; font-size: 13px; } 
#topmenu .widget-container { margin-top: 5px;} 
.topsocial .widget-containter {margin-top: 0px!important;} 

#menu-menu li a span { 
    display:block; 
    line-height:14px; 
    margin-right: 4px; 
    text-transform: lowercase!important; 
}  

.menu-menu ul li a span { 
    line-height:14px; 
    margin-right: 4px; 
    text-transform: lowercase!important; 
} 

.topsocial {margin-top: 5px; color: #fff;} 

.ktlogo {float: left; width: auto; margin-top:-35px; margin-left: 137px; font-family: 'HoneyScriptLight'; font-size: 60px; padding-top: 22px; } 

.ktlogo img:hover {background: none;} 

#navigationtop { font-size: 12px; color: #fff;} 
#navigationtop ul li strong { display: block; padding-bottom: 7px; font-size: 14px; } 
#navigationtop .ktwrap { padding-top: 60px; padding-bottom: 5px; height:71px; } 
#floatnumber { 
    position: absolute; 
    top: -3px; 
    right: 150px; 
    z-index : 270; 
}

PHP片段：

<?php get_template_part('includes/template-parts/topbar'); ?> 

<?php } ?> 

<?php 
$disable_sidebar = of_get_option('disable_footer', ''); 
if($disable_sidebar['navbar']==0) { ?> 

<div class="ktfullwidth" id="navigationtop"> 
    <div class="ktwrap"> <div id="floatnumber"><img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660"></div> 
     <div class="ktlogo"> 
      <?php 
      $disable_sidebar = of_get_option('disable_parts', ''); 
      if($disable_sidebar['logo']==0) { ?> 

       <?php if (of_get_option('logo')) { ?> 

         <a href="<?php echo home_url() ?>"><img src="<?php echo of_get_option('logo'); ?>" /></a> 

         <?php } else { ?> 

         <a href="<?php echo home_url() ?>"> 

         <?php if (of_get_option('logotext')) { ?> 
          <?php echo of_get_option('logotext', ''); ?></a> 
         <?php } else { ?> 
         Combined Effort</a> 
         <?php } ?> 

       <?php } ?> 

      <?php } ?> 

     </div>

來源

2012-08-15 Orun

問題出在客戶端上，那麼爲什麼要顯示PHP代碼而不是HTML？ – 2012-08-15 19:57:42

您可以更改

<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul> 
<div class="topsocial right">...</div>

到

<ul id="menu-main" class="sf-menu sf-js-enabled sf-shadow">...</ul> 
<div class="right"> 
    <img src="http://combined-effort.com/wp-content/uploads/telephone-18005174660.png" alt="Phone Number 1-800-517-4660"> 
    <div class="topsocial right">...</div> 
</div>

然後刪除其他圖像。

來源

2012-08-15 19:57:58 Oriol

沒有詳細閱讀或測試您的代碼：如果我確定了您的身份並且想要將該號碼移動到酒吧，那麼您必須將其置於此固定標題中。在原始代碼中，您可以看到有兩個重疊標題，並且該數字不在固定位置的標題中。其中有

<div id="topmenu" class="ktfullwidth">

，但（和你的代碼看似爲好）

<div class="ktfullwidth" id="navigationtop">

把＃頂部菜單-DIV中的號碼。

你可能也可以使用位置號碼本身，但我會建議ot把它放在div中。

編輯：我很困惑的導航divs的名稱。我希望我現在明白了。

來源

2012-08-15 20:01:08

CSS在X軸上的固定位置，但在Y軸上爲絕對位置？

回答

相關問題