如何将一个元素定位为相对元素,但属性却像绝对元素一样?[已关闭]

问题描述 投票:-3回答:1

假设我要做一个div。我想把它相对定位,比如说在它正常位置的右边100像素处。然而,我希望所有其他div都忽略它,就像它被绝对定位一样。我该怎么做呢?

html css
1个回答
1
投票

有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>
© www.soinside.com 2019 - 2024. All rights reserved.