Question

我的容器有问题，它实际上与标题重叠，如何在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>

Answer 1

标题应位于您的容器内，并为容器提供固定宽度

这是一个例子：

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 2

我在这里解决了同样的问题，显然，我使用以下解决方法解决了这个问题：

style =＆＃34; z-index：1＆＃34;用于导航栏或标题; style =＆＃34; z-index：0＆＃34;对于容器;

*提醒：使用＆＃34;样式＆＃34;在你的html脚本中，而不是链接到它的css文件夹是不推荐的，它会起作用，但它是一个更好的做法，试图避免这种情况。

容器重叠到标头

2 个答案: