Div с абсолютным положением положения не перемещается там, где он shoud (понимание позиционирования css)

Question

Я пытаюсь понять позиционирование css. Для того, что я прочитал, когда элемент установлен в position: absolute, он затем расположен по отношению к первому родительскому элементу, который у него нет, position: static.

Итак, я создал три цветных divs и переместил второй 50px слева. Затем я установил положение абсолютным на третьем и записал влево: 50 пикселей; также.

Я не понимаю, почему тогда мой третий нырять, не перемещается 100 точек с левой стороны (50, который перемещается второй + 50, что следует перейти от того, где второй это)

Вот сценарий с этим: https://jsfiddle.net/kbww4w7v/

Почему я не хватает? Благодаря!

(PS Не говори мне Google это. У меня есть. Я прочитал каждый учебник или сообщение о позиционировании, которая появилась в Google странице 1 или 2, и до сих пор не понимаю)

Answer 1

Третий ДИВ не является ребенком других дивизий. Они должны быть вложенными:

<div id="grandad"> 
    <div id="father"> 
     <div id="element"></div> 
    </div> 
</div> 

, как они в настоящее время, они считаются братьями и сестрами, и ничего друг от друга не наследуют.

Answer 2

Я посмотрел ваш код и то, что у вас есть, это не родители/сиблины, но все ваши divs находятся на одном уровне. Попробуйте CSS с этим:

<div id="grandad"> 
    <div id="father"> 
    <div id="element"></div> 
    </div> 
</div> 

Answer 3

Это работает только тогда, когда они вложены друг в друга.

<div id="grandad"> 
    <div id="father"> 
    <div id="element"></div> 
    </div> 
</div> 

See this updated Fiddle

Answer 4

абсолютно позиционируемые элементы больше не в потоке дерева DOM, они только по-настоящему не уважают позицию относительного элемента.

/* DEMO */ 
 
body {margin: 0;} 
 
div { 
 
    height: 200px; 
 
    float: left; 
 
    box-shadow: inset 0 0 2px 0 #111; 
 
} 
 

 
/* STYLES */ 
 
.relative { 
 
    position: relative; 
 
    width: 33%; 
 
    background: red; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    left: 25%; 
 
    width: 50%; 
 
    background: gold; 
 
}

<div class="relative"> 
 
\t <div class="absolute"></div> 
 
</div> 
 
<div class="relative"> 
 
\t <div class="absolute"></div> 
 
</div> 
 
<div class="relative"> 
 
\t <div class="absolute"></div> 
 
</div>

Answer 5

Разница между 3 основной позиции находятся в следующем:

статический: элемент рассматривается в потоке DOM, так что сохраняют это положение и размер и не является подверженных трансформации положения.

Относительно: элемент рассматривается в потоке DOM, но он подвержен трансформации положения, основанной на самом положении (в примере пространство поля является мантеном и занимает пространство в теле, но только это исходное пространство, материнский элемент не перемещается, а #father перекрывает его)

absolute: элемент считается вне потока DOM, и он не занимает места, он подвержен трансформации положения на основе первого нестатического элемента или окна если другой элемент не найден, он может переходить через другие элементы.

Вы можете увидеть в приведенном ниже примере 3 случая:

\body\ 
<div id="grandad"></div> 
<div id="father"></div><div id="mother"></div> 
<div id="element"></div> 

jsfiddle