CSS渡一教程学习笔记(六)--层模型、position定位。

最新推荐文章于 2022-10-25 11:11:35 发布

zhou_shadow

最新推荐文章于 2022-10-25 11:11:35 发布

阅读量435

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/91978226

版权

本文介绍了CSS层模型中的绝对定位、相对定位和固定定位，详细阐述了position属性的用法，包括absolute、relative和fixed。同时，通过实例演示了如何使用z-index实现元素的层级控制，并提供了五环居中和两栏分布的实践效果。

摘要由CSDN通过智能技术生成

层模型

如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

绝对定位和相对定位有以下四个属性

left
top
right
bottom

1、position:absolute

脱离原来位置进行定位，常有原位置被清除，随后元素占据，absolute在最上层
最近的有定位的父级进行定位，如果没有，则相对于文档进行定位。

2、position:relative

保留原来位置进行定位。
相对自己原来的位置进行定位
notice:用relative设置参照物，用absolute进行定位

3、position:fixed

== 广告定位，也就是固定定位==

4、z-index:1就是z轴，数值越大，越靠近"你"，默认是0

实践:五环居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五环居中</title>
    <style>
        *{
    
            margin:0px;
            padding:0px;
        }
        .plot{
    
            position:absolute;
            width:760px;
            height:340px;
            left:50%