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轴上为绝对位置？

回答

相关问题