position positioning
Before we talk about relative positioning, let's first talk about one of our techniques for using HBuilder. We create a way to group divs into boxes. If we want to create a div with a class name box, we can do thisDiv.box+ tab.
If three or more can do thisDiv.box$*3 + tab.
Okay, now let's say a question, we created three boxes, and we want to change the position of the boxes like this:
We can divide this action into two steps.
- Move box2 200 PX to the right.
- Move box2 down by 200px.
Let's do the first step to set a left margin margin for box2-Left:200px.
Successfully, let's move on to the second step.Set an upper margin margin for box2-Top:200px.
We found that we could not achieve the expected results.So let's go ahead and we'll adjust the box 3 up by 200px.
It looks like OK, but it seems like a hassle. We just want to adjust the position of box2, but we have to adjust box3. That's a hassle.So we're leading to positioning!!!
- Let's talk about positioning:
- Positioning refers to placing a specified element anywhere on the page.
- Elements can be placed arbitrarily by positioning.
- How to set the position?
- By position property!!
Let's look at the reference manual for the novice bird tutorial to find possible values:
| value | describe |
|---|---|
| absolute | Generate absolutely positioned elements relative to the first parent element other than static positioning.The position of the element is specified by the attributes "left", "top", "right" and "bottom". |
| fixed | Generates fixed positioned elements that are positioned relative to the browser window.The position of the element is specified by the attributes "left", "top", "right" and "bottom".(Fixed positioning is also one of the determinants of positioning) |
| relative | Generates relatively positioned elements that are positioned relative to their normal position.So, "left:20"Adds 20 pixels to the LEFT position of the element. |
| static | Default value.No positioning, elements appear in the normal flow (ignoring top, bottom, left, right, or z-index declarations). |
| sticky | Sticky positioning, which is based on where the user scrolls.It behaves likePosition:relative;When a page scrolls beyond the target area, it behaves like a pagePosition:fixed;, it will be fixed to the target position.Note: Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning.Safari needs to use -webkit-prefix (see the example below). |
| inherit | Specifies that the value of the position attribute should be inherited from the parent element. |
| initial | Set this property as the default value for details CSS initial keyword. |
Relative relative positioning
When the position of an element is set to relative, the element is set to relative positioning.Characteristic:
- When relative positioning of an element is turned on without setting an offset, no change is made to the element.
- Relative positioning is positioning relative to the original position of an element in the document stream.
- Relatively positioned elements are not detached from the document stream.
- Relative positioning takes our elements one level higher.
- Relative positioning does not change the nature of an element, whether block or block, inline or inline.(Actually, it's the same thing as the third point)
When positioning of an element is turned on (the position attribute value is a non-static value), the offset of an element can be set by four attributes: left, right, top, and bottom.
- Left: The left offset of the element relative to its positioning position.
- Right: The offset of the element relative to the right of its positioning position.
- top: The side offset of an element relative to its positioning position.
- bottom: The offset of the element relative to the lower side of its positioning position.
Now let's look at using relative positioning to solve the problem we described above.
The fourth feature, what does it mean to elevate one level of our elements?Let's take a look:
Usually only two offsets are needed to locate an element.Typically, an offset in the horizontal direction and an offset in the vertical direction are chosen to locate an element.
We only need to imagine a planar coordinate system when setting relative positioning.
absolute positioning
When the position property value is set to absolute, the absolute positioning of the element is turned on.Characteristic:
-
Turning absolute positioning on will detach elements from the document stream.
-
If you do not set an offset after turning on absolute positioning, the position of the element will not change.(If not set after opening, the browser will automatically add a default offset to the element, which is the current location)
- Absolute positioning is relative to the closest ancestor element to which positioning was turned on.If all ancestor elements are not positioned on, they will be positioned relative to the browser window.(Typically, turning on absolute positioning of child elements will also turn on relative positioning of parent elements.)
- Absolute positioning raises an element one level.
- Absolute positioning changes the nature of elements, inline elements become block elements, and the width and height of block elements are stretched by default by content.
Fixed fixed position
Fixed positioning of elements is turned on when the position property of the element is set to fixed.Fixed positioning is also an absolute positioning, and most of its features are the same as absolute positioning.
The difference is:
- Fixed positioning is always relative to the browser window.
- Fixed positioning is fixed somewhere in the browser window and does not scroll with the scrollbar.eg: Advertising.(IE6 does not support fixed positioning)
z-index hierarchy problem
When we turn positioning on, we raise the element one level.
So what if box1 and box3 were also turned on and promoted to the same level?
We say that if the hierarchy of the positioned elements is the same, the elements below the structure will cover the elements above.
Can we adjust the hierarchy again?
Tolerable!!!
- The z-index attribute allows you to set the hierarchy of elements.
- You can set a positive integer for z-index as the value that will be the level of the current element.
- The higher the level, the more preferred the display.
- z-index is not useful for elements that do not have position ing turned on.
- A parent element's hierarchy never covers a child element.(It can be understood that paternity is great)
opacity sets the transparent background of the element
opacity can be used to set the transparency of an element's background, which requires a value between 0 and 1.
- 0 means full transparency.
- 1 means completely opaque.
- 0.5 means translucent.
<span style="color:#000000"><code class="language-html"><span style="color:#61aeee"><!DOCTYPE html></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>html</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>head</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>meta</span> <span style="color:#d19a66">charset</span><span style="color:#669900"><span style="color:#999999">=</span><span style="color:#999999">"</span>UTF-8<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>title</span><span style="color:#999999">></span></span><span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>title</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>style</span> <span style="color:#d19a66">type</span><span style="color:#669900"><span style="color:#999999">=</span><span style="color:#999999">"</span>text/css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#669900">.box1</span><span style="color:#999999">{</span>
<span style="color:#98c379">width</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">height</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">background-color</span><span style="color:#999999">:</span> red<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Turn on relative positioning*/</span>
<span style="color:#98c379">position</span><span style="color:#999999">:</span> relative<span style="color:#999999">;</span>
<span style="color:#98c379">z-index</span><span style="color:#999999">:</span> 1<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Set translucency*/</span>
<span style="color:#98c379">opacity</span><span style="color:#999999">:</span> 0.5<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
<span style="color:#669900">.box2</span><span style="color:#999999">{</span>
<span style="color:#98c379">width</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">height</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">background-color</span><span style="color:#999999">:</span> yellow<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Turn on absolute positioning*/</span>
<span style="color:#98c379">position</span><span style="color:#999999">:</span> absolute<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Set offset */</span>
<span style="color:#98c379">top</span><span style="color:#999999">:</span> 100px<span style="color:#999999">;</span>
<span style="color:#98c379">left</span><span style="color:#999999">:</span> 100px<span style="color:#999999">;</span>
<span style="color:#98c379">z-index</span><span style="color:#999999">:</span> 2<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Set translucency*/</span>
<span style="color:#98c379">opacity</span><span style="color:#999999">:</span> 0.5<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
<span style="color:#669900">.box3</span><span style="color:#999999">{</span>
<span style="color:#98c379">width</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">height</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">background-color</span><span style="color:#999999">:</span> aqua<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Turn on absolute positioning*/</span>
<span style="color:#98c379">position</span><span style="color:#999999">:</span> absolute<span style="color:#999999">;</span>
<span style="color:#98c379">left</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">top</span><span style="color:#999999">:</span> 200px<span style="color:#999999">;</span>
<span style="color:#98c379">z-index</span><span style="color:#999999">:</span> 3<span style="color:#999999">;</span>
<span style="color:#5c6370 ">/* Set translucency*/</span>
<span style="color:#98c379">opacity</span><span style="color:#999999">:</span> 0.5<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>style</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>head</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>body</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>div</span> <span style="color:#d19a66">class</span><span style="color:#669900"><span style="color:#999999">=</span><span style="color:#999999">"</span>box1<span style="color:#999999">"</span></span><span style="color:#999999">></span></span><span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>div</span> <span style="color:#d19a66">class</span><span style="color:#669900"><span style="color:#999999">=</span><span style="color:#999999">"</span>box2<span style="color:#999999">"</span></span><span style="color:#999999">></span></span><span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"><</span>div</span> <span style="color:#d19a66">class</span><span style="color:#669900"><span style="color:#999999">=</span><span style="color:#999999">"</span>box3<span style="color:#999999">"</span></span><span style="color:#999999">></span></span><span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>body</span><span style="color:#999999">></span></span>
<span style="color:#e06c75"><span style="color:#e06c75"><span style="color:#999999"></</span>html</span><span style="color:#999999">></span></span>
</code></span>
We can use opacity to set transparency and create a hazy feeling.
Note: The opacity attribute is not supported in browsers with IE8 or below and needs to be replaced by the following attributesFilter:alpha(opacity=50);.