Question

我一直在教自己HTML / CSS，并且意识到CSS定位使我感到困惑。我使自己成为一个基本的练习，可以玩耍并帮助我理解。（它包含4个部分，标记为1-4。）我可以使1-3部分将其自身绝对定位在相关容器主体的顶部，但是4部分拒绝其自身绝对定位。但是，如果我将第4节移到html中的第2节之后（所以它不是最后一个），则效果很好。因此，基本上，仅最后一节不起作用。抱歉，这令人困惑。还在学习，所以还在学习我在说什么！如果有人可以照亮我的工作，我将永远感激不已！谢谢！

body {
  position: relative;
  width: 700px;
  height: 200px;
}

section {
  width: 25%;
  height: 25%;
}

#section1 {
  background-color: yellow;
  position: relative;
}

#section2 {
  background-color: red;
  position: relative;
}

#section3 {
  background-color: green;
  position: relative;
}

#section4 {
  background-color: aqua;
  position: absolute;
  color: white;
}

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>

Answer 1

如果您尝试将每个子元素放置到特定的绝对位置，请尝试使其父元素relative <section>和子元素absolute {{ 1}}。然后指定它们的top，right，bottom或left值。

body
{
    position: relative;
    width: 200px;
    height: 200px;
}

section {
    width: 50%;
    height: 50%;
    position: absolute;
}

#section1 {
    background-color: yellow;
    left: 0;
    top: 0;
}
#section2 {
    background-color: red;
    left: 50%;
    top: 0;
}
#section3 {
    background-color: green;
    left: 0;
    top: 50%;
}
#section4 {
    background-color: aqua;
    left: 50%;
    top: 50%;
    color: white;
}

<head>
    <title>UNDERSTANDING POSITIONING</title>
    <link rel="stylesheet" href="main.css">
</head>  
<body>
    <section id="section1">Section 1</section>
    <section id="section2">Section 2</section>
    <section id="section3">Section 3</section>
    <section id="section4">Section 4</section>
</body>

Answer 2

我做了一些更改，这是解释。您可以在CSS中将position: absolute添加到section中，以便HTML中的所有<section>都具有绝对位置。

将position: relative放在#section1，#section2，#section3和#section4中时，您将<section>的位置从{{ 1}}到absolute，在这种情况下，您不想这样做。

有了这些，就可以和relative一起玩，看看每个top, bottom, left, right彼此如何堆叠。

相对于容器，我有<section>距顶部0像素，距左侧0像素。

section1距容器顶部20像素，相对于容器左侧20像素。

section2距容器顶部40像素，相对于容器左侧40像素。

section3距容器顶部60像素，相对于容器左侧60像素。

因为我们没有定义z-index，所以在HTML代码中，后一个section4将位于前一个<section>的上方。

<section>

body
{
    position: relative;
    width: 700px;
    height: 200px;
}

section {
    width: 25%;
    height: 25%;
    position: absolute;
}

#section1 {
    background-color: yellow;
}
#section2 {
    background-color: red;
    top: 20px;
    left: 20px;
}
#section3 {
    background-color: green;
    top: 40px;
    left: 40px;
}
#section4 {
    background-color: aqua;
    color: white;
    top: 60px;
    left: 60px;

}

最后一项不会绝对排名

2 个答案: