层模型的个人笔记

最新推荐文章于 2024-06-20 20:19:27 发布

帅癌病患者

最新推荐文章于 2024-06-20 20:19:27 发布

阅读量66

点赞数

分类专栏： css 个人笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_51664705/article/details/109695910

版权

css 个人笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

absolute定位

————————————脱离原来位置的定位
补充：opacity（透明度0-1）园的写法 border-color:;
一旦一个标签被absolut定位后就跑到了上一个层级

html--
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="2.css">
</head>
<body>
    <div class="demo"></div>
    <div class="box"></div>
</body>
</html>

css--
*{
    margin: 0;
    padding: 0;
}
.demo{
    position:absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}

定位后：
在这里插入图片描述

定位前：
在这里插入图片描述

relative定位

——————————————保留原来位置进行定位

*{
    margin: 0;
    padding: 0;
}
.demo{
    position: relative;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0.5;
}
.box{
    width: 150px;
    height: 150px;
    background-color: green;
}