Question

我正在尝试让我的徽标固定在我的标题上。调整屏幕大小时，我不希望它通过主页选项卡。我怎么能这样做？

<div class="header_menu">
    <div class="main_top">
        <div class="wrap">
            <div class="wrapper"> 
                <div class="cssmenu"><div class="headerlogo_tag"><img src="http://fc07.deviantart.net/fs71/f/2014/112/5/6/logo_by_destinyjade-d7fmi7c.png" width="174" height="174" alt=""></div>
                  <ul>
                       <li class="active"><a href="index.html"><span>Home</span></a></li>
                          <li><a href="about.html"><span>About</span></a></li>      
                       <li class="last"><a href="news.html"><span>News</span></a></li>
                       <li class="last"><a href="team.html"><span>Team</span></a></li>
                       <li class="last"><a href="schedule.html">Schedule</a></li>
                       <li class="last"><a href="contact.html"><span>Contact</span></a></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.headerlogo_container {
    position: absolute;
    left: 55px;
    top: -10px;
    z-index: 1000;
}

.headerlogo_tag {
     float: left;
     position: absolute;
     left: 255px;
     top: -10px;
     z-index: 1000;
}

.header_menu {
    background: #000000;
    background-image: url(http://fc06.deviantart.net/fs70/f/2014/112/b/a/header_bg_by_destinyjade-d7flhv4.png);
    background-repeat: repeat-x, repeat;
    position:fixed;
    width:100%;
    z-index: 999;
}

Answer 1

将position:relative;添加到您的.wrap。

然后，.headerlogo_tag将保持相对于.wrap的绝对位置。

.wrap{
  margin:0 auto;
  width:80%;
  position: relative;
}
.headerlogo_tag {
  position: absolute;
  left: 55px;
  top: -10px;
  z-index: 1000;
}

你可能想要更多地尝试定位，但这就是想法。

Answer 2

.headerlogo_tag { position: absolute }

摆脱它。你不需要绝对位置。你不希望绝对位置。绝对位置不应该像这样被滥用。它对你做了什么？：（

说真的，除非你想要一个绝对定位的元素，否则不要使用它。而且你几乎从不需要一个绝对元素，因为DOM基于HTML（v2），它基于自由流畅的文本。

将绝对div定位在固定容器中

2 个答案: