容器重叠到标题

我的容器有问题，它实际上与标题重叠，我如何在css中调整它？它应该在头部和容器之间有一点余量。容器重叠到标题

看到这里 enter image description here

#myHeader { 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     z-index: 100; 
     background-color: YELLOW; 
     box-shadow: 0px 2px 3px #888888; 
     height: 150px; 
     opacity:0.95; 
     filter:alpha(opacity=10); 
    } 

#myContent { 
    padding-top: 10px; 

} 

#myContent .row { 
    background-color: #fff; 
} 

#myContent h1{ 
    margin-top: 0; 

}  


    <section id="myContent"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-8 col-md-8 col-lg-8"> 
        <div> 
         <br /> 
         <?php if ($breadcrumb): ?> 
          <div id="breadcrumb"><?php print $breadcrumb; ?></div> 
         <?php endif; ?> 

         <?php print $messages; ?> 

         <div id="content" class="column"><div class="section"> 
          <a id="main-content"></a> 
          <?php print render($title_prefix); ?> 
          <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?> 
          <?php print render($title_suffix); ?> 
          <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?> 
          <?php print render($page['help']); ?> 
          <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?> 
          <?php print render($page['content']); ?> 
          <?php print $feed_icons; ?> 
         </div></div> <!-- /.section, /#content --> 

         <?php if($is_front):?> 
         <h2>MISSION & VISION<br /></h2> 
         <!-- <img src="<?php print(path_to_theme()); ?>/images/Bottom.jpg" alt="" class="img-thumbnail pull-left" style="margin-right: 10px;" /> --> 
         <div> 
          Our company comes to trade few years ago but from beginning we start to do only professional projects. 
          We our not satisfied with just good result. It needs to be perfect. 
          <br /><br /> 
          That's why we teach our employers still to make them the best in this region. 
          Every 2 years we give to our employers test from new technologies to make sure that we are leaders on market. 
          <br /><br /> 
          There is no excuse for fails. Our standards are so high that for us is every time the first rule quality. 
          <br /><br /> 
          You can see in photogallery our references but they are more. Our company are in touch with partners like QINT, TSN-D or FinishLine... 
          <br /><br /> 
          Come to our company take prospects to see if our portfolio fit to your vision and after that we can find the best way 
          how to realize it TOGETHER! 
          <br /><br /> 
         </div> 
         <?php endif; ?> 
        </div> 
       </div>

来源

2015-07-02 PHP

请分享您的HTML和CSS代码。 –

默认情况下，事情不会重叠，所以你可能在某个地方做错事实际迫使它发生。很难说没有看到任何代码更多。请在小提琴 –

中重现此行为检查我的编辑。 – PHP

截图标题应该是你的容器内，并给你固定宽度容器

这里有一个例子：

.container{ width:100%; max-width:500px; margin:0 auto; position:relative; background-color:yellow; padding-top:100px;} 
 
.header{ width:100%; max-width:500px; margin-left:-250px; left:50%; height:100px; background-color:red; position:fixed; top:0px; text-align:center;}

<div class="container"> 
 
     <div class="header">Header</div> 
 
     This is your container<br/> 
 
     This is your container<br/> 
 
     This is your container<br/> 
 
     This is your container<br/> 
 
     This is your container<br/> 
 
     This is your container<br/> 
 
    </div>

来源

2015-07-02 08:58:05 abidkhanweb

我在这里解决了同样的问题，显然我使用以下溶剂解决了这个问题：对于导航栏或标题，我解决了这个问题：

style =“z-index：1” style =“z-index：0”为容器;

*提醒：在您的html脚本中使用“style”而不是链接到它的css文件夹已被弃用，它会起作用，但它是一种更好的尝试避免这种情况的做法。

来源

2016-06-13 20:45:26

容器重叠到标题

回答

相关问题