2021.6.1.20:41
Posted 望尐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021.6.1.20:41相关的知识，希望对你有一定的参考价值。
静态定位
<style> .parent{ width: 300px; height: 300px; background-color: aqua; } .child{ width: 100px; height: 100px; background-color: pink; /* 静态定位 position: static; 元素默认情况下就是静态定位，静态定位设置元素的偏移量(top,bottom,right,left)无效 position属性用来设置元素的定位 left,top,right,bottom 用来设置元素的偏移量 */ position: static; top: 100px; left: 100px; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body>
相对定位
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 300px;
height: 300px;
background-color: pink;
}
.child1{
width: 100px;
height: 100px;
background-color: powderblue;
/*
相对定位的使用场景：
1. 微调元素位置
2. 子绝父相 ，做为绝对定位元素的参照物
相对定位元素的参照物：元素本身原来的位置
相对定位的特性：
1.相对定位的元素不会脱离标准文档流，依然会占据原来的空间。
*/
position: relative;
left: 10px;
top: -50px;
}
.child2{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
绝对定位
<style>
*{
margin: 0;
padding: 0;
}
body{
padding-top: 100px;
background-color: red;
}
.parent{
width: 300px;
height: 300px;
background-color: blue;
margin-top: 100px;
/* position: relative; */
}
.child1{
width: 100px;
height: 100px;
background-color: pink;
/*
绝对定位：
参照物： 一般指定它的父元素作为参照物（即：父元素相对定位）
如果父元素没有定位，那么会向上一层一层的查找是否有定位的父级元素，
直至找到 html根标签为止。
绝对定位的特性：
绝对定位的元素会脱离标准文档流，不在占据原来的位置。
*/
position: absolute;
top: 100px;
}
.child2{
width: 100px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">绝对定位的元素</div>
<div class="child2"></div>
</div>
固定定位
<style> body{ height: 3000px; } .box{ width: 100px; height: 300px; background-color: skyblue; position: fixed; right: 100px; bottom: 100px; } span{ position: fixed; top: 100px; left: 100px; background-color: skyblue; width: 300px; height: 100px; } /* 固定定位： 以浏览可视窗口为参照， 与父元素有无定位无关 特征： 固定定位的元素会脱离标准文档流，不占据原来的空间。 */ </style> </head> <body> <div class="box"></div> <span>固定定位</span> </body>
粘性定位
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.wrapper{
height: 1000px;
}
.top{
height: 60px;
background-color: skyblue;
}
.header{
height: 100px;
background-color: slateblue;
}
.nav{
height: 60px;
background-color: pink;
position: sticky;
top: 0px;
}
.content{
height: 600px;
background-color: red;
}
/*
粘性定位： 被认为是相对定位和固定定位的结合体，元素在没有到达指定偏移量时属于相对定位；
元素到达指定偏移量时属于固定定位。
注意： 粘性定位必须指定偏移量才能生效
*/
</style>
</head>
<body>
<!-- <div class="wrapper"> -->
<div class="top"></div>
<div class="header"></div>
<div class="nav"></div>
<!-- </div> -->
<div class="content"></div>
</body>
以上是关于2021.6.1.20:41的主要内容，如果未能解决你的问题，请参考以下文章