position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left , top , right и bottom , также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed , relative или absolute , то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute , но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left , top , right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById(» elementID «).style.positionБраузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .
How to Use Absolute Positioning with Your Images
You can create beautiful web pages by using small and simple CSS tricks such as absolute positioning with your images. This post walks you through how to use absolute positioning to enhance your web design.
What is absolute positioning?
Before we get to how you can do that, let’s talk about what absolute positioning is. There are five ways to position elements on a page: static, relative, absolute, fixed, or sticky. By default, all the elements on the page have a static position.
Absolutely positioning an element will remove that element out of the page’s workflow and will make it behave independently from all the other elements on the page. The absolutely positioned element can only be positioned in reference to its parent element. If it doesn’t have a parent element, the HTML element will be its parent. The key to absolute positioning an element inside another element is to make the parent element’s position relative and make the child element’s position absolute:
In our example, the element that contains the image has absolute positioning and its direct parent which is the div element with the .container class has a position of relative. Also, a small note: Normally, we write «position: absolute;» or «position: relative» in our CSS file to make an element relatively or absolutely positioned but since we’re using Bootstrap, we can take advantage of Bootstrap’s shorthand utilities to configure positioning. We can simply give the tag elements quick positioning classes such as .position-static , .position-relative , .position-absolute , .position-sticky , and .position-fixed .
CSS
Our image sits at the bottom of our container div so if we position it as bottom: 0; it will be positioned right at the bottom of the container. Over here we wanted to be a bit creative and make our astronaut sit on the ledge of our container so we gave it a bottom position value of -80px. That way half of the astronaut image will be below the container.
And there it is. With some simple tweaks to our HTML and CSS, we have an image that is fixed at the bottom of our section.
How to Absolutely Position an Image using CSS
In this lesson, I will show you how to use CSS to absolutely position an image. The example I will use is that of a blog header image with the author’s image positioned to the bottom left of the blog image. This is quite a common design to see on blog posts and it can be easily achieved.
THE FINISHED FLEXBOX AND CSS DESIGN
Above is a screenshot of the finished design. The author’s photo has been absolutely positioned against the blog image. A white border has also been placed around the author’s image to lift it from the background blog image.
THE HTML
The HTML structure is fairly straightforward and consists of nested div elements. The container div is not required although it has been included to demonstrate how the design might fit into a larger page design where container divs are typically used.
Line 14: this is the div that holds both the blog image and the author image. The position attribute of this div will be set to relative.
THE CSS
Again, relatively simple code is used:
Lines 1 — 4: these are not required if you are not using the container div element. The display is set to flex and then we set the content to center.
Lines 6 — 8: the blog-header div is set to relative positioning. All content within this div can then be set to absolute positioning.
Lines 12: note that the absolute position of the author’s image is set to -25px from the bottom. This ensures that the author’s image extends beyond the bottom of the blog image. The author’s image has dimensions of 100px by 100px. You may wish to adjust the position of your images according to your dimensions.
Line 14: a border radius of 53px is used. This gives the round image for the author. The full width of the image is 106px (100px image width + 3px border width on each side. Divide this by 2 to get the border radius).
This is a very simple example of what can be achieved using relative and absolute positioning of elements. I realise that Flexbox has only been used for the container div but, hopefully, you can see how this can be used in conjunction with absolute positioning.