HTML/CSS parent 和 children 的绝对位置

Question

将方框转换为同心圆（彼此位于同一中心的圆）。外圈应为黑色，大小为 300px，内圈应为白色，大小为 200px。

html:

<div id="p10">
    <div id="outer">
        <div class="rectangle" id="inner"></div>
    </div>

css:

#p10 #outer {
    border-radius: 100%;
    background-color: #000;
    width: 300px;
    height: 300px;
    border-color: #000;
    position: absolute;
}

#p10 #inner {
    background-color: #fff;
    border-color: #fff;
    border-radius: 100%;
    width: 200px;
    height: 200px;

    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

css 仅在 #p10 #outer 位置为绝对位置时有效。我对为什么会这样感到困惑。这是否意味着任何时候我希望子元素位置是绝对的，所有 parent 的位置都必须是绝对的？

Answer 1

position:absolute 元素的位置是相对于位置设置为 absolute、relative 或 fixed 的最近容器，否则它是相对于视口的。

如果 top、right、bottom 或 left 偏移值的 none 是相对于初始包含块的指定。

可能还有更多的可能性，你可以在W3C, and MDN上了解更多。

Answer 2

只需更改父级的相对位置 div

 #p10 #outer {
    border-radius: 100%;
    background-color: #000;
    width: 300px;
    height: 300px;
    border-color: #000;
    position: relative;
  }

Answer 3

我建议对外部使用 position:absolute，对内部使用 position:relative。然后，将 border-radius 属性设置为像素宽度的一半。 border-radius 中的百分比可能会导致一些问题。自然你需要将内部居中，所以给它这些属性。

#inner {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:relative;
width:200px;
border-radius:100px;
}

Answer 4

Absolute/relative 这里可能不需要，至少相对于内部内容而言是这样。

你也可以在 padding 和 mind 上传递 box-sizing:

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 200px;
  height: 200px;
  padding:50px;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
  box-sizing:content-box; /*make sure padding is not included in size calculation*/
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
}

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

你也可以在 marging 和 mind 上转发 collapsing margins:

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 300px;
  height: 300px;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
  padding:1px; /* mind [collapsing margins][1] */
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  margin:50px;
}

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

你也可以使用 flex :

#p10 #outer {
  border-radius: 100%;
  background-color: #000;
  width: 300px;
  height: 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color: #000;
  /*position: absolute;*//* did you need it ? it will work the same for the child; */
}
#p10 #inner {
  background-color: #fff;
  border-color: #fff;
  border-radius: 100%;
  width: 200px;
  height: 200px;
}

<div id="p10">
  <div id="outer">
    <div class="rectangle" id="inner"></div>
  </div>

也可以用单箱

.circle {
  /* diplay, float, position, .. whatever is needed to be inserted mong the rest of your document styles*/
  margin:55px;
  height:200px;
  width:200px;
  border:solid;
  box-shadow:0 0 0 50px gray, 0 0 0 53px;
  border-radius:50%;

<div class="circle"></div>

HTML/CSS parent 和 children 的绝对位置

HTML/CSS position absolute for parent and children

html

css

position

css-position

absolute