使用position:absolute/relative定位div二次失效问题求助

核心问题出在绝对定位的参考容器上：你的sign-in元素用了position: absolute，但它的直接父容器（包裹offer和sign-in的<div>）没有设置position: relative，导致它会相对于整个文档的根节点定位，而不是你期望的offer元素。再加上你设置的top:132px是基于视口的位置，自然会跑到offer下方。

修改步骤 #

1. 给包裹offer和sign-in的父div添加position: relative，让它成为sign-in的定位参考容器
2. 调整sign-in的top和right属性，基于新的参考容器定位到offer的右上方

修改后的完整代码 #

HTML

<header>
    <img class="header-img" src="https://i.pinimg.com/222x/ec/c6/f2/ecc6f20889bba2976601a3abb029183c.jpg">
    <div class="header-text left">&emsp;ToKa&emsp;&emsp; &emsp;Fitness</div>
</header>
<div class="container">
    <div class="offer"></div>
    <div class="sign-in"></div>
</div>

CSS

header {
    width: 100%;
    height: 120px;
    position: relative;
    border: 2px black solid;
}

img.header-img {
    width: 122px;
    height: 122px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

div.header-text {
    width: 100%;
    position: absolute;
    padding-top: 42px;
    font-family: articulat-cf, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

div.container {
    position: relative;
}

div.offer {
    width: 100%;
    height:30px;
    position: relative;
    border: 2px green solid;
}

div.sign-in {
    width: 120px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 4px;
    border:2px red dashed;
}

补充说明 #

绝对定位元素的定位逻辑是：找最近的设置了position: relative/absolute/fixed/sticky的父元素作为参考，如果所有父元素都是默认的position: static，就会相对于整个文档视口定位。你之前项目里成功的案例，肯定是给绝对定位元素的父容器设置了position: relative，这次漏掉了这个关键步骤。

内容的提问来源于stack exchange，提问作者Andrew