CSS定位
日期： 2020-11-04 分类： 个人收藏 437次阅读
定位：
| position属性 | 说明 |
|---|---|
| static | 默认值，没有定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
标准文档流
标准文档流是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
一般在HTML元素分为两种：块级元素和行内元素。
块级元素：
块级元素是从上到下一行一行的排列，默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列。
像div,p这些的元素属于块级元素。
行内元素：
行内元素是在一行中水平布置，从左到右的排列 。span,strong等属于行内元素
static定位
position:static
元素没有定位，以标准流方式显示
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position属性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果截图：
相对定位
relative属性值
相对定位就是相对自身原来位置进行偏移
偏移设置：top、left、right、bottom。
可以用left来描述盒子向右移动
可以用right来描述盒子向左的移动
可以用top来描述盒子向下的移动
可以用bottom来描述 盒子的向上的移动
如果是负数就是相反的方向
例如：left:10px 就是距离左边10px（也就是往右移动10px）
相对定位的盒子，不脱离标准流，老家保留位置，其后的元素不能占用其原有位置。
相对定位的主要用途是作为其内部元素绝对定位时的参照标准，相对于“我”而言。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>relative属性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position:relative;
top:10px;
left:150px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果截图：
绝对定位
absolute属性值
偏移设置： left、right、top、bottom。
使用了绝对定位的元素以它最近的一个“已经定位”的“==祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，其后的元素会占据其原有的位置。
样例代码1：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute属性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position: absolute;
top:10px;
right: 10px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果截图1：
样例代码2：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>absolute属性</title>
<style>
div {
width: 300px;
margin:10px;
padding:5px;
font-size:12px;
line-height:25px;
}
#father {
width: 500px;
margin: 50px auto;
border:1px #666 solid;
padding:10px;
position: relative;
}
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position: absolute;
top:10px;
right: 10px;
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
效果截图2：
固定定位
固定定位，就是始终让一个元素固定在一个位置，不管怎么滚动页面，那个固定的元素也不会改变位置。
position: fixed;
fixed属性值
偏移设置： left、right、top、bottom。
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.d1 {
position: fixed;
width: 100px;
height: 100px;
left: 50%;
background-color: #666666;
}
</style>
<title></title>
</head>
<body>
<div class="d1">这是个固定在中间位置的div块</div>
<p>Keafmd</p>
<p>这是一句话1</p>
<p>这是一句话2</p>
<p>这是一句话3</p>
<p>这是一句话4</p>
<p>这是一句话5</p>
<p>这是一句话6</p>
<p>这是一句话7</p>
<p>这是一句话8</p>
<p>这是一句话9</p>
<p>这是一句话10</p>
<p>这是一句话11</p>
<p>这是一句话12</p>
<p>这是一句话13</p>
<p>这是一句话14</p>
<p>这是一句话15</p>
<p>这是一句话16</p>
<p>这是一句话17</p>
<p>这是一句话18</p>
<p>这是一句话19</p>
<p>这是一句话20</p>
</body>
</html>
效果截图（动图）：
z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方。
网页元素透明度
CSS设置元素透明度 opacity:x
x值为0~1，值越小越透明
例：opacity:0.4;
filter:alpha(opacity=x)
x值为0~100，值越小越透明
例：filter:alpha(opacity=40);
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
position: relative;
}
.container div{
position: absolute;
}
</style>
<title></title>
</head>
<body>
<div class="container">
<div style="background-color: #008000;z-index: 100;opacity: 0.4;">牛哄哄的柯南</div>
<div style="background-color: #0000ff;left: 10px;top: 10px;z-index: 50">Keafmd</div>
<div style="background-color: #ffff00;left: 20px;top: 20px;z-index: 10">一起加油</div>
</div>
</body>
</html>
效果截图：
圆角边框
通过设置 border-radius 属性（边框圆半径）
↓这样设置就可以让正方形的div框成为圆。
border-radius:50% ;
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.d1{
height: 100px;
width: 100px;
background-color: #6495ED;
line-height:100px ;
text-align: center;
border-radius:50% ;
}
</style>
<title></title>
</head>
<body>
<div class="d1">Keafmd</div>
</body>
</html>
效果截图：
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
精华推荐