Css position absolute padding top

Как работает 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; ближнего родителя Дальний родитель:

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

Источник

Vjeux

CSS – Absolute position taking into account padding

When looking at the code of Lightbox.com I remarked that they are not using top and left in order to position their images but margin-top and margin-left . I’ve been wondering why for some time and finally found the reason.

It is a way to position absolutely elements in a container and preserving the padding property of the container.

Using traditional top and left

As you can see, the position is relative to the top left of the container, completely ignoring padding.

Using margin-top and margin-left

And now, with this trick, the position is taking padding into account.

Why it works?

When declaring an element position: absolute; and not setting any of top , right , bottom and left , the element is going to be rendered using the normal flow for its position. However, it is not going to be added to the flow.

So if you want it to work, do not insert anything non absolute before the elements and make sure you don’t set any of top , right , bottom and left .

Conclusion

This is a neat CSS trick but there’s a little side effect when debugging. Inspectors are going to highlight the top left area of the element in orange which may be strange 🙂

Related Posts

• July 4, 2012CSS – Vertical Height of Smileys(1)
  There’s one big issue when displaying images inline like smileys is to position them at the right height. Using vertical-align pre-sets Usually what you do is try to use vertical-align and test all the possibilities. Then you are frustrated because you can’t find the one that is […]
• September 14, 2011CSS – One Line Justify(27)
  I came across a CSS problem, text-align: justify does not work with only one line. Justify behavior The reason is because it has been designed with paragraphs in mind. It justifies all the lines but the last one. Normal Justify Lorem ipsum dolor sit amet, consectetur […]
• September 17, 2011WoW Interface Anchor Positioning(6)
  I’ve always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors. Anchor The concept is extremely simple. You can tell where you want the element […]
• July 8, 2012Image Layout Algorithm – Lightbox(1)
  Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px Lightbox.com has a really interesting image layout algorithm. We’re going to see how it works and its best use case. How does it work? Column based The algorithm is column based. You pick a […]
• July 7, 2012CSS – Understanding Percentage Background Position(9)
  In this article, I’m going to guide you through a concrete problem I had to solve. Eventually, we’ll see how to use percentage values in the background-position CSS property and how it solves a lot of tough issues. Usual way Positioning the image The usual way to position images […]

About Me

Recent Posts

@vjeux on Twitter

Categories

Blogroll

• blog by Julien Marquegnies
• A bit of reverse engineering by delroth
• AR.Drone & Golf Blog by Gauth
• Blog by Felix Abecassis
• C++ and Haskell by Vermeille
• C++ Carnets by Thomas Sanchez
• Technical blog by Enki
• The Last Static Blog by Ubitux

Источник