Position Property
With the CSS Position property, it is possible to determine how the objects on the page will be positioned and whether they will be fixed or movable. This feature is mostly used for boxes, i.e. div elements, and the locations of the boxes can be determined, as well as adjusting which box will appear on top if they overlap.
While positioning, the position property must be determined first. E.g;
.fixedBox {
position:fixed;
left:200px;
ball:50px;
}
As in the example above, the position property should be written at the top. Otherwise it may not work.
Objects can be positioned in 4 different ways: static, absolute, fixed and relative.
After determining how the object will be positioned, its exact positions are set by specifying the distances from the left, right, top and bottom (left, right, top, bottom).
1. Static Positioning (Static)
It is the default positioning. That is, all elements are normally statically positioned and placed side by side or one under the other according to the flow of the page.
2. Fixed Positioning (Fixed)
When fixed positioning, that object will remain fixed on the screen and the object will not move even if the page is scrolled with the scroll bar.
In this method;
left : distance of the object to the left of the window
right : distance of the object to the right of the window
top : distance of the object from the top edge of the window
bottom : determines the distance of the object from the bottom edge of the window.
3. Relative Positioning
Objects can be placed at a certain distance from where they would normally be. E.g;
#Box{border:1px solid black; margin:0 auto; width:100px;}
.relativeImage{position:relative; left:-20px;}
When we place a picture to which the relativePicture style is applied, inside the div element named Box, the picture will be placed 20px to the left from where it should normally be.
4. Absolute Positioning
The difference from fixed positioning is that objects remain fixed within the page, not inside the window. In other words, its position in the window is determined with the left, right, top and bottom properties, but the object also moves when the page is scrolled up and down.
What is the css position feature, the difference between absolute and relative, the difference between absolute and fixed, placing objects on the screen with css, css position examples
EXERCISES
You can make changes on the codes and see the result by clicking the try it button.
#box1{
background-color: #6C3;
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 50px;
}
Read 843 times.