CSS positioning (CSS positioning overview, relative positioning, absolute positioning, floating)

CSS Positioning Properties

CSS positioning properties allow you to position elements.

Properties	Description
Position	Place the element in a static, relative, absolute, or fixed position.
Top	Defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block.
Right	Defines the offset between the right margin boundary of the anchored element and the right boundary of its containing block.
Bottom	Defines the offset between the margin boundary beneath the anchor element and the lower boundary of its containing block.
Left	Defines the offset between the left margin boundary of the anchored element and the left boundary of its containing block.
Overflow	Sets what happens when the content of an element overflows its area.
Clip	Sets the shape of the element. The element is cut into the shape and then displayed.
Vertical-align	Sets the vertical alignment of the element.
Z-index	Sets the stacking order of elements.

CSS relative positioning

Relative positioning is a very easy-to-grasp concept. If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point (where it should be) by setting a vertical or horizontal position.

If you set top to 20px, the box will be 20 pixels below the top of the original position. If left is set to 30 pixels, a space of 30 pixels is created on the right side of the element, that is, the element is moved to starboard.

#box_relative {  position:relative;  left:30px;  top:20px;}

As shown in the following:

Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

CSS Absolute Positioning

Absolute positioning "makes the position of an element independent of the document flow and therefore does not occupy space". this is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.

The layout of other elements in the normal stream is like an absolutely positioned element that does not exist:

#box_relative {  position:absolute;  left:30px;  top:20px;}

As shown in the following:

Tip: The position of an absolutely positioned element is relative to the nearest positioned ancestor element , and if the element does not have a positioned ancestor element, then its position is relative to the original containing block . Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page. You can control the stacking order of these boxes by setting the Z-index property.

CSS Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

Again, when Box 1 floats to the left, it is out of the document stream and moves to the left until its left edge touches the left margin of the containing box . Because it is no longer in the document flow, it does not occupy space, the actual overlay Box 2, so that box 2 from the view disappears .

If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box , and the other two boxes float to the left until you hit the previous float box .

As shown, if the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space . If the height of the floating elements is different , then they may be "stuck" by other floating elements when they move down:

Line boxes and cleanup

The row box next to the float box is shortened to make room for the floating box, and the row box surrounds the float box.

Therefore, creating a floating box allows the text to surround the image:

To prevent the line box from wrapping around a floating box, you need to apply the clear property to the box's row box . The value of the clear property can be left, right, both, or none, which indicates which sides of the box should not be next to the floating box .

Suppose you want to float a picture to the left of a block of text, and you want the picture and text to be contained in another element with a background color and border. You might write the following code:

. news {  Background-color:gray;  Border:solid 1px black;  }. News img {  float:left;  }. News p {  float:right;  } <div class= "News" ><p>some text</p></div>

In this case, there is a problem. because the floating element is out of the document flow, the div that surrounds the picture and text does not occupy space .

How can surround elements visually surround floating elements? you need to apply clear somewhere in this element:

Unfortunately there is a new problem, because no existing elements can be used to clean up, so we can only add an empty element and clean it up .

<div class= "News" >

<p>some text</p>
<div class="clear"></div>
</div>

.clear {
  clear: both;
  }

This will achieve the effect we want, but we need to add extra code. There are often elements that can be applied to clear, but sometimes you have to add meaningless tokens for layout purposes.

But there's another way we can do that is to float the container div :

. news {  Background-color:gray;  Border:solid 1px black;  float: left;  }. News img {  float:left;  }. News p {  float:right;  } <div class= "News" ><p>some text</p></div>

This will get the effect we want.

Unfortunately, the next element is affected by this floating element. To solve this problem, some people choose to float everything in the layout, and then use the appropriate meaningful elements (often the footer of the site) to clean up the floats. This helps to reduce or eliminate unnecessary markup .