css的定位笔记
程序员文章站
2022-04-04 09:55:49
relative：相对定位。 1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。 2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。 3. 原来是行内元素，设置相对定位后，依然是行内元素。 4. 设置了相对定位的块级元素，如果没有设置宽度，其 ......
relative：相对定位。
1. 不论其父元素和相邻元素的position是什么，均相对于自身原来的位置来偏移。
2. 不会脱离文档流，其原来的位置依然保留着，不会被文档中其他的元素占用。
3. 原来是行内元素，设置相对定位后，依然是行内元素。
4. 设置了相对定位的块级元素，如果没有设置宽度，其宽度依然是拉伸至父元素宽度的100%。
下面是demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>相对定位</title>
</head>
<style>
.a {
background: yellow;
height: 100px;
width: 100px;
}
.b {
background: red;
height: 100px;
width: 100px;
position: relative;
top: 20px;
margin-top: 20px;
margin-bottom: 20px;
/* 相当于以前的位置先向20px;在top原来的位置20px; */
/* bottom: ; */
}
.c {
background:green;
height: 100px;
width: 100px;
}
span{
position: relative;
top: 50px;
}
input{
width: 20px;
height: 30px;
}
span{
position: relative;
width: 100px;
height: 100px;
background: red;
/* 行内元素不会影响宽高 */
}
</style>
<body>
<!-- 相对定位就是相当于自己以前在标准流中的位置来移动
不会脱离自己的标准流，自己的位置不变 position:relative;
top:20px;
left:20px;
相对定位应用场景
用于对元素进行微调
配合后面的学习的绝对定位来使用
-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<input type="text" class="d">
<span>输入</span>
</body>
</html>
李南江老师视频笔记
absolute：绝对定位。
1. 相对于最近的一个position不为static的父元素来定位，如果没有，则相对于html来定位，注意：此处网上很多资料说是相对于body来定位，下文会进行验证。
2. 设置了绝对定位的行内元素，会转化为块级元素，可以设置宽高。
3. 设置了绝对定位的块级元素，如果没有设置固定宽度，则其宽度不会自动拉伸至父元素的100%，而是由内容和内边距的宽度来决定的。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>绝对定位</title>
</head>
<style>
div {
height: 100px;
width: 100px;
}
.a {
background: red;
}
.b {
background: green;
position: absolute;
/* right: 0; */
/* /* top: 0; */
bottom: 0;
/* 脱离流元素，相对于body的位置 */
}
.c {
background: blue;
}
span {
position: absolute;
width: 100px;
height: 100px;
background: yellow;
/* 行内元素不会影响宽高 */
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- <span>我是span</span> -->
</body>
</html>
子绝父相
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
</head>
<style>
/* 如果用相对定位则不居中，如果使用绝对定位是按当前屏幕决定位置，会随屏大小移动 */
*{margin: 0;
padding: 0;
}
ul{
list-style: none;
height: 50px;
width: 700px;
margin: 0 auto;
margin-top: 100px;
}
ul li{
float: left;
text-align: center;
width: 100px;
line-height: 50px;
background: rgb(184,184,184);
}
ul li:nth-of-type(4){
position: relative;
background: #aad;
}
ul li img{
position: absolute;
top: -13px;
left: 42px;
}
</style>
<body>
<ul>
<li>京东时尚</li>
<li>美妆馆</li>
<li>超市</li>
<li>生鲜
<img src="./images/faqa.gif" alt="">
</li>
<li>闪购</li>
<li>拍卖</li>
<li>金融</li>
</ul>
</body>
</html>
上一篇： 前端入门5-CSS弹性布局flex
下一篇： 校园里面爆笑雷料多