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 positioning The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:absolute; /*绝对定位*/
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>Relative positioning, the code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:relative;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
#dv1{
width:100px;
height:100px;
background:green;
position:fixed;
left:50px;
top:50px;
}
</style>
</head>
<body>
<div id="dv1"></div>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
<p>php 中文网</p>
<p>学习电脑</p>
<p>二次开发</p>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
