Home > Developer > Web Develop
CSS Positioning (positioning)
The so-called positioning allows you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself.
CSS provides three basic positioning mechanisms: normal flow, floating, and absolute positioning.
Position syntax:
Position:static Absolute Relative
Normal flow (Static):
There is also a process called document flow, which determines the arrangement of elements in the order in which they are placed in the HTML. And this process follows the standard description.
Relative positioning (relative):
The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. (Official definition)
Simply put, the element box is based on the upper-left point of the original position of the element box in the normal flow, and is positioned as the offset of the set value. It does not affect its original position in the document flow, so it sometimes overrides other element boxes.
Absolute positioning (absolute):
The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. (Official definition)
Simply put, the element box is deleted in the normal flow space, and then the element box is based on the upper left point of its nearest positioned ancestor element, and if the element does not have a positioned ancestor element, its position is based on the upper left point of the original containing block and is positioned as the offset of the value set.
An absolutely positioned element box is closed in the normal flow, so its next element box in the normal flow is padded up, and the positioned element box overrides the other element box.
To summarize : relative positioning is the initial position of the "relative to" element in the document, while absolute positioning is "relative to" the nearest positioned ancestor element, if no positioned ancestor element exists, then the original containing block is "relative to".
It's better to see it together.
Float (float)
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.
Like absolute positioning, the element box floats to the left or right according to the setting until it touches the border, and the floating element box is removed from the normal stream, and its space is appended to the element frame behind it.
Drawing too much trouble, directly on the code:
1<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >23<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >4<title>css layout</title>5<script type= "Text/javascript" src= "A.js" ></script>6<style>7 #box {8 border:1px solid Green;9 width:300px;Ten height:300px; One } A #box1 { - border:1px solid; -background-Color:yellow; the width:70px; - height:70px; - } - #box2 { + border:1px solid; -background-color:red; + width:70px; A height:70px; at } - #box3 { - border:1px solid; -background-Color:green; - width:70px; - height:70px; in } -</style> to +<body> -<div id= ' box ' > the<div id= ' box1 ' > Box 1</div> *<div id= ' box2 ' > Box 2</div> $<div id= ' box3 ' > Box 3</div>Panax Notoginseng</div> -</body> theEffect:
Then add 12 to 16 lines of code with the float property:
1 #box1 {2 border:1px solid; 3 background-Color:yellow; 4 width:70px; 5 height:70px; 6 float : Right; 7 }
Effect:
We see that box 1 floats to the right of the parent box body, and Box 2 and box 3 fill up the space of the original box 1.
If you change right to left.
float: left;
Effect:
Supposedly box 1 left floating, and then should be box 2 is covered by the box 1, but so see the box 2 and the box 3 words overlap together?
In fact, check with the debugger:
Box2 is indeed covered by the box 1, the original idea is correct.
The box 2 also floats to the left, the effect:
This is obvious, the Green Box 3 is missing, box 1 box 2 in order to the left, Box 3 is covered by the box 1.
How is the font in box 3 not up?
In fact, 3 elements of the text in the box is a text flow, and the text flow is not with the flow of the box body floating upward, so the situation has been created.
If all 3 boxes are left floating, the
However, if the parent frame is not wide enough, such as box width set to 180px, then:
However, if the height of box 1 is higher than the other, such as the height of box 1 is 100px, then:
See box 3 is box 1 stuck, is not very interesting!
Now let's take a look at the floating effects of text and pictures:
Code:
1<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >23<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >4<title>css layout</title>5<script type= "Text/javascript" src= "A.js" ></script>6<style>7 . Box {8 border:1px solid Green;9 width:300px;Ten height:300px; One } A . img { - width:80px; - height:80px; the } - -</style> - +<body> -<div class= ' box ' > +<IMG class= ' img ' src= ' image/1.png '/> A<p> Christmas Silly Home Oh ah is base oh i i the Dragon Boat festival Ah base oh wow a few drops Eva home Big AO I base I think shoot low-lying excitement I home ah my pride I feel skin and oh mutual powder Oh </p> at</div> -</body> -There are no floating effects added here:
If the picture adds a floating property:
1 . img {2 width:80px; 3 height:80px; 4 float : Left; 5 }
Effect:
If you want to prevent text from wrapping around a picture and make room for a picture, we can do this by adding a floating effect to the text stream below.
We add a background color to the parent frame body.
1 . Box {2 border:1px solid Green;3 width:300px;4 height:300px;5background-Color:yellow;6 }7 . img {8 width:80px;9 height:80px;Ten float: Left; One } A p { - float: Left; -}Effect:
In fact, there is a problem here because we define the height of the box parent frame, and if there is no height defined:
We found that the height of the parent frame was changed to 0, and the following picture and text were detached from the text stream due to the float, thus not occupying the space of the parent frame body, and thus the parent frame body height was 0. How to solve this problem?
This requires the use of the attribute clear.
The code is as follows:
1<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >23<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >4<title>css layout</title>5<script type= "Text/javascript" src= "A.js" ></script>6<style>7 . Box {8 border:1px solid Green;9 width:300px;Tenbackground-Color:yellow; One } A . img { - width:80px; - height:80px; the float: Left; - } - p { - float: Left; + } - . Clear { + Clear:both; A } at -</style> - -<body> -<div class= ' box ' > -<IMG class= ' img ' src= ' image/1.png '/> in<p> Christmas Silly Home Oh ah is base oh i i the Dragon Boat festival Ah base oh wow a few drops Eva home Big AO I base I think shoot low-lying excitement I home ah my pride I feel skin and oh mutual powder Oh </p> -<div class= "Clear" ></div> to</div> +</body> -Effect:
This solves our problem.
There is, of course, a way to float the whole box so that it can achieve the clear effect, but the next element will be affected by this floating element. So a lot of the time is to use the clear attribute to achieve this purpose.
Here's a little experiment:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >#box {border:1px solid green; width:300px; height:300px; } #box1 {border:1px solid; Background-Color:yellow; width:70px; height:70px; float: Left; } #box2 {border:1px solid; Background-color:red; width:70px; height:70px; float: Left; } #box3 {border:1px solid; Background-Color:green; width:70px; height:70px; float: Left; } div {clear:both; } </style>is still the beginning of the 3 boxes, all floating to the left, but now to add a clear property, the result:
"Css" layout layouts (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
