假设我要做一个div。我想把它相对定位,比如说在它正常位置的右边100像素处。然而,我希望所有其他div都忽略它,就像它被绝对定位一样。我该怎么做呢?
有2个元素一个在另一个中。首先,一个简单的 position: absolute;
而内部有 position: relative; right: 100px
. 把任何需要的内容放在里面 .inner
body {
counter-reset: foo-counter;
}
div {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, .3);
background-color: rgba(0, 0, 0, .1);
text-align: center;
}
div:not(.pop):before {
counter-increment: foo-counter;
content: "# " counter(foo-counter);
}
.pop {
text-align: left;
position: absolute;
background-color: rgba(120, 0, 0, .7);
}
.pop:before {
counter-increment: foo-counter;
content: "# " counter(foo-counter);
}
.inner {
position: relative;
top: 20px;
right: 20px;
background-color: rgba(0, 40, 0, .2);
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="pop"><div class="inner"></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>