Basic usage of position z-index em rem zoom in CSS

1, Position positioning:

CSS Positioning and floating

CSS provides properties for positioning and floating, which allow you to set up a column layout, overlap parts of the layout with another part, and complete tasks that you typically need to work with multiple tables over the years.

The basic idea of positioning is simple, allowing 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 positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

Relative positioning, absolute positioning, and floating.

Position the meaning of the property value:

Static

The

element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

Relative

The

element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

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.

Fixed

the element box behaves like the position is set to absolute, but its containing block is the window itself.

 

2.z-index element Stacking sort
Z-index is used to set or retrieve the stacking order of objects, and the corresponding script attribute is zindex.
The larger the value of the Z-index, the higher the stacking level of the element.

<style>      . a{          width:300px;          height:300px;          Background:purple;  /* Define a background here to let us know where the div is/          position:absolute;          left:50px;          top:50px;          Z-index:1      }      . b{          Position:absolute;          left:80px;          top:80px;          width:50px;          height:50px;          Background:white;          z-index:0      }  </style>  <div class= "a" ></div>
  <div class= "B" ></div>

Zoom scale Element
Zoom applies to all elements to set or retrieve the scale of the object, the corresponding script attribute is zoom, and the original scale value is 1.
Code:

CSS

12345678910111213141516171819202122

<style> Div{ width: 100px; height: 100px; float: left      } . First-div{ background: purple; Zoom:1.5       } . Second-div{ background: black; Zoom:1       } . Third-div{ background: red; Zoom:. 5       } </style> <div class= "First-div" ></div> <div class= "Second-div" ></div> <div class= "Third-div" ></div>

The above code will be shown in turn purple-black-red Div, the size of 100px is 1.5 times times, 1 time times, 0.5 times times.
What is EM and rem?
1em is equal to the current font size, and the change in value means the font size is adjusted. EM has inherited this feature, that is, the external parent element defines the em size of the font, and the inner child element inherits the style of the property.
rem = root em. As the name implies, Root is the root, the top. That is, the root of the EM, this root refers to the HTML element. So the size of REM is an adjustment of the relative size of the font for the size of the HTML root element.
Code:

CSS

1234567891011121314151617181920212223242526272829

<style> body{ font-size: 12px;       } /*html{ font-size:12px;      }*/ Div{ width: 200px; height: 100px; float: left      } . First-div{ font-size: 1em       } . Second-div{ font-size: 2em       } . Third-div{ font-size: 1rem       } . Fourth-div{ font-size: 2rem       } </style> <div class= "First-div" >hello world</div> <div class= "Second-div" >hello world</div> <div class= "Third-div" >hello world</div> <div class= "Fourth-div" >hello world</div>

The above code shows different sizes of fonts, and the difference between EM and REM can be seen by simply commenting on the body font style and the HTML font style.

Basic usage of position z-index em rem zoom in CSS