问固定定位和绝对定位的文本定位问题
EN

Stack Overflow用户

提问于 2016-02-24 11:45:28

回答 1查看 94关注 0票数 0

在我正在创建的一个网站上，我想要导航栏和一张放在它下面的图片来填充屏幕的全部宽度，没有填充。我使用了一个固定位置的导航条和一个绝对位置的图像工作。然而，现在我想在图像下添加一些文本，但是它将自己定位在页面的右上角，我需要更改什么才能使文本在图像下的位置？

这是我的CSS：

body{
    background-color: rgb(47,47,47);
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;
    color: rgb(230,230,230);

}
ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width: 518px;
    margin: 0 auto;

}
li{
    float: left;
}
li a{
    font-size: 24px;
    display: block;
    width: auto;
    padding: 32px 30px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(230,230,230);

}
li a:hover{
    background-color: rgb(47,47,47);
}
li a:active {
    background-color: rgb(223, 66, 68)
}

nav{
    background-color: rgb(6,6,6);
    opacity: 0.8;
    height: 100px;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    z-index:1;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
#logo{

    position: absolute;
    top: 100px;
    left:0px;
    width: 100%;

}

HTML：

<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">CV</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  

    <img id="logo" src="images/logo.png"/>

    <h1>About me</h1>


</body>

css

position

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-24 12:00:17

将图像和文本放在一个div下面，并给出给图像的css，给那个新的div。即从position:absolute到新创建的div。

像这样：

body{
    background-color: rgb(47,47,47);
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    letter-spacing: -1px;
    color: rgb(230,230,230);

}
ul{

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width: 518px;
    margin: 0 auto;

}
li{
    float: left;
}
li a{
    font-size: 24px;
    display: block;
    width: auto;
    padding: 32px 30px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(230,230,230);

}
li a:hover{
    background-color: rgb(47,47,47);
}
li a:active {
    background-color: rgb(223, 66, 68)
}

nav{
    background-color: rgb(6,6,6);
    opacity: 0.8;
    height: 100px;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    z-index:1;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
.belowDiv{

    position: absolute;
    top: 100px;
    left:0px;
    width: 100%;

}

  <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">CV</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>  

<div class="belowDiv">
  <img id="logo" src="images/logo.png"/>
  <h1>About me</h1>
</div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35601303

复制

相似问题

问固定定位和绝对定位的文本定位问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定定位和绝对定位的文本定位问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定定位和绝对定位的文本定位问题
EN