Позиция абсолютная, но относительно родительской

У меня есть два div внутри другого div, и я хочу расположить один дочерний div в верхнем правом углу родительского div, а другой дочерний div - в нижней части родительского div, используя css. Т.е., я хочу использовать абсолютное позиционирование с двумя дочерними div, но поместите их относительно родительского div, а не страницы. Как я могу это сделать?

Пример html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Ответы

Ответ 1

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Это работает, потому что position: absolute означает что-то вроде "use top, right, bottom, left для размещения себя по отношению к ближайшему предку, у которого есть position: absolute или position: relative."

Итак, мы делаем #father have position: relative, а дети имеют position: absolute, затем используйте top и bottom для размещения детей.

Ответ 2

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Ответ 3

Если вы не даете какой-либо позиции родителям, то по умолчанию он принимает static. Если вы хотите понять, что разница относится к этому примеру

Пример 1 ::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Здесь родительский класс не имеет позиции, поэтому элемент помещается в соответствии с телом.

Пример 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

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

Ответ 4

Если кто-то хочет разместить дочерний div непосредственно под родительским

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Рабочая демонстрация Codepen