How to use position and float in html?

Syntax:

position: static (static positioning) | absolute (absolute positioning) | fixed (fixed positioning) | relative (relative positioning)

Attribute parameters:

static: Static positioning, no special positioning, the object follows HTML positioning rules (the default state of html)

absolute: Absolute positioning, the object is out of the document flow, and you need to use left, top, right, bottom and other attributes for accuracy location. You can use the z-index attribute for cascading. (If the element floats when using absolute positioning and is not at the position you specified, you can use relative positioning on the parent element of the element. "Personal suggestion")

relative: Relative positioning, the object does not leave the document Flow cannot be cascaded like absolute, but attributes such as left, top, right, bottom, etc. must still be used to move relative to the original object position in the normal document flow, and the original position will be occupied by other elements.

fixed: Fixed positioning, separated from the document flow, can keep the element in a fixed position on the screen, and the element position will not change even if the scroll bar is pulled down.

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p111111 will move 150px down and 200px to the right

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

p222222 will move 150px from the bottom and 100px from the right border

When you want to do Use position: fixed; bottom: 50px; right: 50px when using a module that is always displayed in the lower right corner of the page; you can make p display 50px from the bottom and 50px from the right border, and no matter how your page changes, p will always be displayed on you The same position within the visual range

z-index: 100px; the larger the pixels that follow, the higher the level of p

Syntax:

float: left | left | none; right, left or not used (default)

float: out of the document flow, floating is relative to the parent element

<p  id="p1">
　　<p  id="p2"></p>
</p>

As above: p1 is the parent of p2 Level element p2 can only be floated inside p1

A frequently used situation for floating is the use of horizontal navigation bars. There are two ways to implement the horizontal navigation bar. As long as the display attribute of the li tag is changed to the inline style, the list can be tiled. This is the core part, but after understanding the box model, we can know that the margin and padding of the inline tag are opposite. The up and down directions are invalid. Only the left and right sides of the list options can be stretched here. The top and bottom directions will not be controlled. Only the top and bottom directions of block-level labels will be controlled.

float is also a simple application of some text wrapping picture effects. Put the picture and text into the same p and then give the picture and p a float: left | right;

<p   style="width:220px;height:300px;float:left;">
　　<img  src=".."   style=" float:left;"/>这里是文字654651进行图文混排以及文字环绕kj dsh gkjh kjh jb kjf bg kjs dh fkj gh kj sd hjf hk jk jsh kjg hk
</p>

The above is the detailed content of How to use position and float in html?. For more information, please follow other related articles on the PHP Chinese website!