HTML+CSS easy entry layer model

What is the layer model?

What is the layer layout model? The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be accurately positioned and operated. However, in the field of web design, layer layout has not been popular due to the mobility of web page sizes. However, there are still advantages to using layer layout locally on a web page. Let's learn about the layer layout in html.

How to accurately position html elements in web pages, just like the layers in the image software PhotoShop, each layer can be accurately positioned and operated. CSS defines a set of positioning properties to support the layer layout model.

The layer model has three forms:

1. Absolute positioning (position: absolute)

2. Relative positioning (position: relative)

3. Fixed positioning (position: fixed)

Absolute positioningThe code is as follows:

    层模型

Relative positioning, the code is as follows:

    层模型

If you want to set a layer for the element Relative positioning in the model requires setting position:relative (indicating relative positioning), which determines the offset position of the element in the normal document flow through the left, right, top, and bottom attributes. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then moves relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , the position before offset remains unchanged.

Fixed positioning

层模型

php 中文网

学习电脑

二次开发

php 中文网

学习电脑

二次开发

php 中文网

学习电脑

二次开发

php 中文网