There are several ways to position html

html positioning includes: 1. Default positioning, static; 2. Relative positioning, relative; 3. Absolute positioning, absolute; 4. Mixed relative positioning and absolute positioning, relative&&absolute; 5. Fixed positioning, fixed; 6 , float, float.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. static (default)

When you do not specify a positioning method for an element (such as p), the default is static, which is according to the flow of the document. (flow) positioning, placing the element in a suitable place. Therefore, under different resolutions, the use of flow positioning can be well adapted and achieve relatively good layout effects.

Generally speaking, we do not need to specify that the positioning method of the current element is static - because this is the default positioning method. Unless you want to override the positioning system inherited from the parent element.

2. Relative (relative positioning)

Based on static, if I want an element to make some adjustments (displacements) to its original position, we You can set the positioning of the element to relative and specify the relative displacement (using top, bottom, left, right).

One thing to note is that the relatively positioned element is still in the document flow and still occupies the position space it originally occupied - although it is no longer in its original position.

3. Absolute (absolute positioning)

If you want to place an element at a specified position in a document, you can use absolute positioning. Set the position of the element to absolute, and use top, bottom, left, and right to position it.

Absolute positioning will cause the element to be removed from the document flow, resulting in the space originally occupied by the element being filled by other elements.

4. mix relative and absolute (mix relative positioning and absolute positioning)

If you set relative to a parent element and set absolute to one of its child elements, For example:

<div id="parent" style="position:relative">
    <div id="child" style="position:absolute">
    </div>
</div>

The absolute positioning reference of the child element is the parent element.

Using mixed positioning, we can use css similar to the following to achieve Two Column positioning

#div-parent {
 position:relative;
}
#div-child-right {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-child-left {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

5, fixed (fixed positioning)

We know that the reference for absolute positioning is "the last positioned parent element (static is not counted)", so what if I want the reference for positioning an element to always be the entire document (viewport)? What should I do?

The answer is to use fixed positioning. The reference object of fixed positioning is always the current document. Using fixed positioning, we can easily position a p in the upper left, upper right, etc. of the browser document. For example, if you want to add an information prompt p and fix the p in the upper right corner, you can use the following css

.element  { 
    position:fixed; 
    top:2%; right:2%;
 }

6, float(float)

for What you need to understand about floating is:

* Floating will remove the element from the document flow, and its space will be filled by other elements.

*The floating parameter object is the parent element and floats in the container of the parent element.

*In order to clear the impact of floating on the elements after the floating element, we add a p after the floating element and set the clear of this p to both.

*If both elements are set to float, the two elements will not overlap. The first element occupies a certain space, and the second element follows closely. If you don't want the second element to follow it, you can use clear on the second floated element.

7、reference

Recommended learning:html video tutorial

The above is the detailed content of There are several ways to position html. For more information, please follow other related articles on the PHP Chinese website!