Css absolute position inside div

Как работает position: absolute;

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top , right , bottom , left , от края ближайшего родителя с position не static . Передвинуть его относительно своего расположения можно с помощью margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение absolute , размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

Поместить элемент над другими элементами, убрав его из потока

Элемент с position: absolute; не влияет на размер родителя.

  
Элемент 

Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  Элемент

Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static

Свойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
 

Если свойство border задано ближайшему родителю с position не static , то элемент смещается относительно внутреннего края рамки, созданной этим свойством.

Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static . Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static .

height: 5em; ближайшего родителя padding: 1em; ближайшего родителя box-sizing: border-box; ближайшего родителя

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
 

Использование свойств top или bottom , left или right зависит от конкретной ситуации.

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
 

Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static

Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute; .

14 15 16 17 18 19 Длинный строчный займёт прямоугольную область 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  
Блочный
 Строчный

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 Элемент 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 Элемент 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
 

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border , но с position не static :

left: 0; right: 0; top: 0; bottom: 0; /* или */ left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%; ). Если расстояние от left не auto до right не auto меньше width , то свойство right игнорируется (см., left: 50%; right: 50%; ).

Элемент 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

  
Элемент
 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
 

Свойство height в процентах не заменяется на height: auto; , даже когда ближайший родитель имеет height: auto; .

Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute; .

overflow: visible; ближайшего родителя (по умолчанию) overflow: auto; ближайшего родителя overflow: hidden; ближайшего родителя

  
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Элемент 28 29 30 31 32 33 34 35 36 37 38 39 40
 

Позиционирование вложенного элемента относительно родителя

Родитель с position: static; пропускается. Если нет родителя с position не static , то положение элемента рассчитывается относительно границы области просмотра окна браузера (см., левый верхний угол страницы).

position: relative; дальнего родителя position: absolute; родителя, стоящего сразу над ближним position: relative; ближнего родителя Дальний родитель:

  Дальний родитель: 
Родитель над ближним: 
Ближний родитель: 
Элемент 
 
 

Чтобы абсолютно позиционированный блок растянуть на всё содержимое вместе со скроллингом ближайшего позиционированного предка, нужно обернуть содержимое в ещё один тег, относительно которого позиционировать блок (см., прокрутить родителя).

Элемент 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

  
 
Элемент
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
 

Родитель с position: static; и overflow не visible , стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute; .

  Дальний родитель: 
Родитель над ближним: 
Ближний родитель: 
Элемент 
 
 

Свойства width , margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static .

position: relative; дальнего родителя position: absolute; родителя, стоящего сразу над ближним position: relative; ближнего родителя Дальний родитель:

  Дальний родитель: 
Родитель над ближним: 
Ближний родитель: 
Элемент 
 
 

Источник

How to position absolute inside a div in Css?

When using CSS to style a webpage, the position property is a useful tool to control the layout and placement of elements on a page. The absolute position value allows elements to be positioned relative to their nearest positioned ancestor element, rather than being positioned relative to the viewport or the normal flow of the document. However, positioning an element with absolute positioning inside a container with a set height and width can sometimes lead to unexpected results.

Method 1: Setting the Position Property of the Container

To position an element with absolute positioning inside a container, you can use the position property of the container element. Here is how you can do it using the position property:

div class="container"> div class="element">div> div>

.container  position: relative; >

.element  position: absolute; >

.element  position: absolute; top: 0; left: 0; >

This will position the element at the top left corner of the container.

Here are some more examples:

.element  position: absolute; bottom: 0; right: 0; >

.element  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >

.element  position: absolute; top: 20px; left: 30px; >

.element  position: absolute; bottom: 20px; right: 30px; >

These are just a few examples of how you can use the position property to position an element inside a container with absolute positioning. With this method, you have full control over the position of the element and can easily adjust it as needed.

Method 2: Using a Wrapper Element with Relative Positioning

To position an element with absolute positioning inside a div, you can use a wrapper element with relative positioning. Here’s how to do it:

.wrapper  position: relative; >

1. Inside the wrapper div, add the element that you want to position absolutely and give it a class name, for example, «absolute-element».

div class="wrapper"> div class="absolute-element"> div> div>

1. Add the CSS code to the absolute-element class to set its position to absolute and adjust its top, left, bottom, and right properties to position it where you want it to be.

.absolute-element  position: absolute; top: 50px; left: 50px; /* Adjust the values as needed */ >

Here’s the complete code example:

div class="wrapper"> div class="absolute-element"> div> div> style> .wrapper  position: relative; > .absolute-element  position: absolute; top: 50px; left: 50px; /* Adjust the values as needed */ > style>

This method allows you to position an element with absolute positioning inside a div without affecting the layout of other elements on the page. By setting the position of the wrapper to relative, you create a new positioning context for the absolute element inside it.

Method 3: Using Flexbox or Grid Layout

To position an element with absolute positioning inside a parent div using Flexbox or Grid Layout, follow these steps:

Using Flexbox

1. Set the parent div to display: flex to enable Flexbox layout.
2. Set the parent div’s position property to relative to establish a new positioning context for the child element.
3. Set the child element’s position property to absolute .
4. Use the align-items and justify-content properties to position the child element as desired.

.parent  display: flex; position: relative; > .child  position: absolute; align-self: center; justify-self: center; >

Using Grid Layout

1. Set the parent div to display: grid to enable Grid Layout.
2. Set the parent div’s position property to relative to establish a new positioning context for the child element.
3. Set the child element’s position property to absolute .
4. Use the grid-row and grid-column properties to position the child element as desired.

.parent  display: grid; position: relative; > .child  position: absolute; grid-row: 2 / 3; grid-column: 2 / 3; >

Note that the values for align-items , justify-content , grid-row , and grid-column can be adjusted to achieve different positioning effects.

Источник