This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).

This blog is suitable for those who are new to HTML and those who want to review after a long time

🌊🌈 About:

Positioning of 6.3_ elements

Floating layouts are flexible, but do not provide precise control over the placement of elements. In CSS, positioning attributes can realize the precise positioning of elements in a web page. Next, we will explain the positioning attributes of elements and several common positioning methods in detail.

The location attribute of the 6.3.1_ element

When creating a web page, if you want an element to appear in a specific location, you need to use the location attribute to precisely locate the element. Element positioning is to place the element in the specified position of the page, mainly including positioning mode and edge offset two parts.

1. Positioning mode

In CSS, the position attribute is used to define the positioning mode of an element. Its basic syntax format is as follows.

The selector {position: Attribute value; }Copy the code

Common values for the position attribute:

value describe
static Static location (default location)
relative Relative location, relative to the location of its original document flow
absolute Absolute positioning, positioning relative to the parent element that was previously located
fixed Fixed positioning, positioning relative to the browser window

As can be seen from the above table, there are various positioning methods, including static positioning, relative positioning, Absolute positioning and fixed positioning, which will be explained in detail later.

2. The edge deviation

The position pattern is used only to define how the element is positioned, not to determine the exact location of the element. In CSS, the edge offset properties top, bottom, left, or right define the exact location of the positioning element.

Setting method of edge offset:

Edge offset attribute describe
top The top offset, which defines the element’s distance from the upper edge of its parent element
bottom The bottom offset, which defines the element’s distance from its parent’s bottom line
left The left offset, which defines the distance of an element to the left of its parent element
right The right offset, which defines the distance of an element to the right of its parent element

As you can see from the table above, the edge offset can be set by top, bottom, left, and right, with values in different units or percentages, as shown in the following example.

position: relative; /* Relative positioning */
left: 50px; /* 50px from the left line */
top: 10px;  /* 10px*/ from the top edge
Copy the code

6.3.2_ Static positioning static

Static positioning is the default positioning of an element. When the position attribute is static, the element can be positioned at a static position. The static position is the default position of each element in the HTML document stream.

By default, any element determines its position by static position, so when the position attribute is not defined, it does not mean that the element does not have a position. It is displayed as static by default. There is no way to change the position of an element with the edge offset attribute (top, bottom, left, or right) in the static positioning state.

6.3.3_ Relative positioning

Relative positioning is the positioning of an element relative to its position in the standard document flow. When the position attribute is relative, the element can be positioned relative. After relative positioning is set for an element, the element’s position can be changed through the edge offset attribute, but its position in the document flow remains.

Example: To demonstrate the method and effect of setting relative positioning of elements,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Positioning of elements</title>
<style type="text/css">

body { 
margin: 0px; 
padding: 0px; 
font-size: 18px; 
font-weight: bold; 
}

.father {
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid # 000;
}

.child01..child02..child03 {
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid # 000;
margin: 10px 0px;
text-align: center;
}

.child02 {
position: relative; /* Relative positioning */
left: 150px; /* 150px from the left line */
top: 100px; /* 100px*/ from the top edge
}

</style>
</head>
<body>
<div class="father">
<div class="child01">child-01</div>
<div class="child02">child-02</div>
<div class="child03">child-03</div>
</body>
</html>
Copy the code

Codes 25 to 29 above set the relative positioning mode for Child02 and change its position with the edge offset properties left and top.

After running, it is not hard to see that when relative positioning is set for Child02, it is offset relative to its default location, but its position in the document flow remains.

6.3.4_ Absolute location is absolute

Absolute positioning is the positioning of the element against the nearest parent element that has been located (absolute, fixed, or relative), or, if none of the parents are located, against the body root element (the browser window). When the position attribute is absolute, you can set the positioning mode of the element to absolute.

Set the location mode of child02 to absolute, changing lines 25-29 as follows:

.child02 {
position: absolute; /* Absolute positioning */
left: 150px; /* 150px from the left line */
top: 100px; /* The margin of the item is 100px*/
}
Copy the code

In the above code, the element child02, set to absolute positioning, is positioned according to the browser window. Also, child03 takes the place of Child02, which means child02 is out of control of the standard document flow and no longer occupies space in the standard document flow.

In the case above, absolute positioning is set for Child02, and the position of Child02 relative to its immediate parent element changes as the browser window zooms in or out. When you narrow the browser window, it’s clear that the position of Child02 relative to its immediate parent has changed.

However, in a web page, the position of the child element relative to its direct parent element generally needs to remain unchanged, that is, the child element is absolutely located according to its direct parent element. If the direct parent element does not need to be located, what should we do?

In this case, you can set the direct parent element to a relative location without setting an offset, and then apply an absolute location to the child element and accurately locate it using the offset attribute. In this way, the parent element does not lose its space, and at the same time, the child element is guaranteed to be accurately located according to the direct parent element.

Example: To demonstrate the method of accurate positioning of child element according to its direct parent element,

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>The child element is positioned relative to the immediate parent</title>
<style type="text/css">

.father {
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid # 000;
position: relative; 
/* Relative location, but no offset. * /
}

.child01..child02..child03 {
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid # 000;
margin: 10px 0px;
text-align: center;
}

.child02 {
position: absolute; /* Absolute positioning */
left: 150px; /* 150px from the left line */
top: 100px; /* 100px*/ from the top edge
}

</style>
</head>
<body>

<div class="father">
<div class="child01">child-01</div>
<div class="child02">child-02</div>
<div class="child03">child-03</div>
</div>

</body>
</html>
Copy the code

In the above code, the code is used to set the relative positioning of the parent element, but not the offset. At the same time, the code is used to set the absolute position on the child element child02 and to precisely position it through the offset attribute.

After running, the child element is offset from the parent element. At this point, the child element’s position relative to its immediate parent remains the same no matter how you scale the browser window.

  • Note: _ (1) If only absolute positioning is set and no edge offset is set, the element’s position remains the same, but it no longer occupies space in the standard document and overlaps with the subsequent element moved up. _ (2) When defining multiple edge offset attributes, if left and right conflict, left prevails. If top and bottom conflict, top prevails.

6.3.5_ Fixed Positioning Fixed

Fixed positioning is a special form of absolute positioning that uses the browser window as a reference to define web page elements. When the position attribute is set to fixed, the positioning mode of the element is set to fixed.

When fixed positioning is set for an element, it is removed from the control of the standard document flow and always defines its display position according to the browser window. This element is always displayed in a fixed position in the browser window regardless of how the browser scrollbar is scrolled or how the size of the browser window changes. However, because IE6 does not support fixed positioning, so it is rarely used in practical work, we will not do a detailed introduction here.

6.3.6_z-index Cascading level attribute

When positioning is set on multiple elements at the same time, it is possible to overlap the positioning elements.

In the CSS, to adjust the stacking order of overlapping positioning elements, apply the z-index attribute to the positioning elements. The value can be a positive integer, a negative integer, or 0. The default value of z-index is 0. The larger the value, the higher the positioning element is in the hierarchy.

  • Note: the _ z-index attribute only applies to positioned elements.

?????




That’s the end of today’s introductory study

Peace

🌊🌈

Akken’s HTML, CSS guide for getting started (1)_HTML basics akken’s HTML, CSS guide for getting started (2)_HTML page elements and attributes Akken’s HTML, CSS guide for getting started (3)_ Text style attributes Aken’s HTML, CSS getting started guide (four)_CSS3 selector Aken’s HTML, CSS getting Started guide (five)_CSS box model Aken’s HTML, CSS getting Started guide (six)_CSS box model Aken’s HTML, CSS getting Started guide (seven)_CSS box model Ken’s HTML, CSS guide for getting started (eight)_ Floating and positioning

🌊🌈 About postscript:

Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add a public account in the profile of the home page to chat with me privately

Thank you for your advice

Ken has recently created a nuggets technology exchange group for interested players to join[Gold mining technology Exchange Group]Welcome to the exchange and discussion

Original is not easy, “like” + “comment” thanks for supporting ❤