Положение абсолютное, но относительно родителя

458

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

Образец HTML:

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

html css

— BlaShadow
источник

Вы хотите, чтобы son1 находился в верхнем правом углу отца, но где внизу должен быть son2? Внизу слева, справа или по центру?

— j08691

1

В этом случае вам нужно будет установить position: относительно родительского элемента и position: absolute для дочерних элементов. На первом дочернем элементе вы должны поместить top: 0 и right: 0, чтобы расположить его в верхнем правом углу родительского элемента. На втором дочернем элементе вы должны поместить bottom: 0, чтобы расположить его в нижней части родительского элемента. Здесь есть отличная статья kolosek.com/css-position-relative-vs-position-absolute, подробно объясняющая относительное и абсолютное позиционирование.

— Неша Зорич

814

#father {
   position: relative;
}

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

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

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

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

— Доменик
источник

17

Почему #father { position: relative; }требуется?

— joshreesjones

4

Требуется изменить «правило положения» для тех, кто находится внутри него.

— BlaShadow

36

@ mathguy54 Поскольку спецификация говорит, что абсолютно позиционированные элементы позиционируются относительно первого позиционируемого родителя, что означает любого родителя, который не имеет значения позиции static.

— Алекс W

как насчет такого сценария: ОТЕЦ относителен, и его рост равен 100%, как позиционировать сына и сына2, скажем, на 20% и 70% роста отца соответственно?

— Росситтен

1

@BruceSun w3.org/TR/CSS2/visudet.html#conisting-block-details

— Алекс W

27

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

— Брайан Варшоу
источник

1

Что делать, если вам нужно изменить размер родителя с ребенком?

— FrenkyB

10

В случае, если кто-то хочет выставить ребенка div прямо под родителем

#father {
   position: relative;
}

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

Рабочая демоверсия Codepen

— petergus
источник

6

Если вы не предоставляете никакой позиции родителю, то по умолчанию это занимает 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
}

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

— анам
источник

А что, если у вас нет #mainall {height: 150px} ...? Я имею в виду, если mainall имеет динамическую высоту?

— Альберт Катала

тогда ваш плавающий элемент будет относительно позиции, которую родительский элемент занимал при загрузке страницы (и css). Если вы хотите обновить это после загрузки страницы, используйте javascript - clientX и clientY - хорошее место для начала

— Abraham Brookes