Последние позиции не будут иметь абсолютной позиции - PullRequest
Новая
       33

Последние позиции не будут иметь абсолютной позиции

0 голосов
/ 26 сентября 2018

Я учил себя HTML / CSS и понял, что позиционирование CSS поставило меня в тупик.Я сделал себе основное упражнение, чтобы поиграть с ним и помочь мне понять.(Он состоит из 4 секций, помеченных 1-4.) Я могу получить секции 1-3 в абсолютном положении на вершине относительного тела контейнера, но секция 4 отказывается от самого абсолютного положения.Тем не менее, если я переместить раздел 4 после раздела 2 в HTML (так что это не последний), он работает нормально.Так что, в принципе, только последний раздел не будет работать.Извините, если это сбивает с толку.Все еще учусь, так еще учусь, о чем я говорюЕсли кто-то может пролить свет на то, что я делаю, я был бы всегда благодарен!Спасибо! 

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>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Я внес некоторые изменения, и вот объяснение.Вы можете добавить position: absolute к section в CSS, чтобы все <section> в HTML имели абсолютное позиционирование.

Когда вы вводите position: relative в #section1, #section2, #section3 и #section4, вы меняете положение <section> с absolute на relative, и вы делаетев этом случае этого делать не нужно.

Как только вы это сделаете, вы можете поиграть с top, bottom, left, right, чтобы увидеть, как каждый <section> стекается друг с другом.

Iиметь section1 на 0px сверху, 0px слева относительно контейнера.

section2 на 20px сверху, 20px слева относительно контейнера.

section3 на 40pxсверху, 40px слева относительно контейнера.

section4 в 60px сверху, 60px слева относительно контейнера.

Поскольку мы не определяем z-index, поэтомув коде HTML более поздняя <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;

}
<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>
0 голосов
/ 26 сентября 2018

Если вы пытаетесь поместить каждый дочерний элемент в определенное абсолютное местоположение, попробуйте сделать их родительский элемент <body> relative и дочерние элементы <section> absolute.Затем укажите их значения 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>
...