HTML implementation of positioning position

HTML implementation method for positioning Position? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

1. The POSS positioning property allows you to position the elements, position attribute values:

Static (default): The element box is generated normally. The block element generates a person’s rectangular box as part of the document stream / standard stream, and within the line elements create one or more lines, placed in their parent elements

relative: element box deviates from a location The elements still maintain their unmodified shape, which is still retained, from this perspective, as if the elements are still the same in the document stream / standard stream

absolute: Elements from the document stream Delete and contain fast positioning relative to it. A block may be another element in the document or an initial containing block. Elements The space occupying the normal document stream will be closed, just like the elements, the elements are positioned into a block frame, regardless of it is in normal flow

Fixed: The performance of the element is similar, and the difference is that the included block is the window itself (body)

II. Relative introduction

The element using this attribute value is relative to the original position Coordinates in the upper left corner to position

code:

   # main {width: 800px; Height: 400px; Margin: 0 Auto Border: 1px solid blue;} .p {width: 110px; Height: 100px; Background: Yellow; margin-left: 10px; float: Left  P1  

P2

P3

P4

FIG effect:

HTML实现定位position的方法 (1) modify the relative positioning values ​​i.e. p2: Add position: relative; top: 120px; Left: 50px;

The right down 50 pixels and 120 pixels are moved to the right with respect to the red dot, and the original position is still empty, Left and top value may be negative, except that the movement of the

in the opposite direction

is to change the absolute i.e. positioned p2: Add position: absolute; top: 120px; left: 50px;

HTML实现定位position的方法

As can be seen that P2 is moving relative to the left corner of Body, and the original position is occupied, it seems that there is no location, because P2 will be below The box is not in the layer in the standard stream, I have been looking for, knowing the location, if I can’t find Body as the right, then move to this level of the upper corner position, below we can be green Add the confines of positioning relative to feel

HTML实现定位position的方法
will be relative to the upper left corner of the green box to move

fixed: to add targeting fixed property value p2

HTML实现定位position的方法
Whether adding positioning RELATIVE to P2 or Absolute, P2 total household registration is moved relative to the left corner of Body, and the previous position has been occupied .

The positioning is still relatively simple, I wish you all the best gains.

Thank you for reading! After reading the above, do you know about the way HTML to locate the position? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment