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

291

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

Образец HTML:

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

источник

2012-05-07 BlaShadow

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

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

541

#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 для размещения детей.

источник

2012-05-07 18:44:11 Domenic

Большое спасибо. можете ли вы объяснить мне, как это работает, почему? – BlaShadow

Почему '#father {position: relative; } 'required? – joshreesjones

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

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

источник

2012-05-07 18:43:49

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

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

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

источник

2014-03-13 11:12:28 anam

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

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

Incase кто-то хочет ПОлОжЕНИЕ ребенок деления с непосредственно под родительским

#father { 
    position: relative; 
} 

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

Работы демонстрационного Codepen

источник

2017-04-05 07:11:27 petergus

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

ответ

Смежные вопросы