Location:

,

Position attribute instructions
static Default value, no location
relative Relative positioning
absolute Absolute positioning
fixed Fixed position

,

Standard document flow

Standard document flow is a simple, normal layout of page elements from top to bottom, left to right, one next to the other.

There are generally two types of HTML elements: block-level elements and inline elements. Block-level elements:

Block-level elements are arranged line by line from top to bottom. By default, one block-level element occupies one line, and the following elements are arranged on another line. Elements like div and P are block-level elements.

Inline elements:

Inline elements are arranged horizontally in a row, from left to right. Span,strong, etc. are inline elements

The static positioning

position:static

Copy the code

The element is not positioned, the sample code is shown as a standard stream:

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset =gb2312" /> <title>position attribute </title> <style> div {width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; } #first { background-color:#FC9; border:1px #B55A00 dashed; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; } < / style > < / head > < body > < div > < div > the first box < / div > < div > the second box < / div > < div > the third box < / div > < / div > < / body > < / HTML >Copy the code

Effect screenshot:

Relative positioning

Relative attribute values

Relative positioning is a deviation from its original position

Offset Settings: top, left, right, bottom.

You can use left to describe the box moving to the right you can use right to describe the box moving to the left you can use top to describe the box moving down you can use bottom to describe the box moving up if it’s negative the opposite direction

For example: left:10px is 10px to the left.

A relatively positioned box, which does not deviate from the standard flow, retains its position, and subsequent elements cannot occupy its original position. The main use of relative positioning is as a reference to the absolute positioning of its internal elements, as opposed to the “I”.

Sample code:

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset =gb2312" /> <title>relative attribute </title> <style> div {width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; } #first { background-color:#FC9; border:1px #B55A00 dashed; position:relative; top:10px; left:150px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; } < / style > < / head > < body > < div > < div > the first box < / div > < div > the second box < / div > < div > the third box < / div > < / div > < / body > < / HTML >Copy the code

Effect screenshot:

Absolute positioning

Absolute Offset: left, right, top, and bottom.

An element that uses absolute positioning is offset against its nearest positioned == ancestor element. If no ancestor element is already located, the location is benchmarked against the browser window. Absolute positioned elements are removed from the standard document flow, and subsequent elements take their place.

Example code 1:

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset =gb2312" /> <title> Absolute attribute </title> <style> div {width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; } #first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; right: 10px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; } < / style > < / head > < body > < div > < div > the first box < / div > < div > the second box < / div > < div > the third box < / div > < / div > < / body > < / HTML >Copy the code

Effect Screenshot 1:



Example code 2:

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset =gb2312" /> <title> Absolute attribute </title> <style> div {width: 300px; margin:10px; padding:5px; font-size:12px; line-height:25px; } #father { width: 500px; margin: 50px auto; border:1px #666 solid; padding:10px; position: relative; } #first { background-color:#FC9; border:1px #B55A00 dashed; position: absolute; top:10px; right: 10px; } #second { background-color:#CCF; border:1px #0000A8 dashed; } #third { background-color:#C5DECC; border:1px #395E4F dashed; } < / style > < / head > < body > < div > < div > the first box < / div > < div > the second box < / div > < div > the third box < / div > < / div > < / body > < / HTML >Copy the code

Effect Screenshot 2:

Fixed position

Fixed positioning means that an element is always fixed in one position, no matter how much you scroll the page, that fixed element will not change position.

position: fixed;

Copy the code

Fixed attribute offset Settings: left, right, top, bottom.

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .d1 { position: fixed; width: 100px; height: 100px; left: 50%; background-color: #666666; } < / style > < title > < / title > < / head > < body > < div > this is a fixed position in the middle of the div block < / div > < p > Keafmd < / p > < p > this is a sentence 1 < / p > < p > this is a 2 < / p > < p > this is a 3 < / p > < p > this is a 4 < / p > < p > this is a sentence 5 < / p > < p > this is a 6 < / p > < p > this is a 7 < / p > < p > this is a 8 < / p > < p > this is a 9 < / p > < p > this is a word 10 < / p > < p > this is a word 11 < / p > < p > this is a 12 < / p > < p > this is a word 13 < / p > < p > this is a word 14 < / p > < p > this is a word 15 < / p > < p > this is a 16 < / p > < p > this is a word 17 < / p > < p > this is a word 18 < / p > <p> <p> </p> </ HTML >Copy the code

Effect screenshot (GIF) :

Z – the index attribute

Adjusts the position above and below the overlapping layer when positioning elements

Z-index value: integer. The default value is 0. If positon is set, z-index can set the overlap between elements. The layer with a large z-index value is located above the layer with a small value.

Transparency of Web elements

CSS sets opacity of elements 😡

The x value ranges from 0 to 1. The smaller the x value, the more transparent it is

Example: opacity: 0.4;

filter:alpha(opacity=x)

The x value ranges from 0 to 100. The smaller the x value, the more transparent it is

Example: the filter: alpha (opacity = 40).

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .container{ position: relative; } .container div{ position: absolute; } < / style > < title > < / title > < / head > < body > < div > < div > cattle to coax the conan < / div > < div > Keafmd < / div > < div > together refueling < / div > < / div > < / body > </html>Copy the code

Effect screenshot:

The rounded edges

The square div box can be set to a circle by setting the border-radius property ↓.

border-radius:50% ;

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .d1{ height: 100px; width: 100px; background-color: #6495ED; line-height:100px ; text-align: center; border-radius:50% ; } </style> <title></title> </head> <body> <div>Keafmd</div> </body> </html>Copy the code

Effect screenshot:



Writing is not easy, read if it helps you, thank you for your support!

If you are a computer terminal, see the lower right corner of the “one button three links”, yes click it [ha ha]

Come on!

Work together!

Keafmd