这篇文章将为大家详细讲解有关CSS样式布局中position属性有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 position属性：用于定义建立元素布局所
这篇文章将为大家详细讲解有关CSS样式布局中position属性有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
position属性：用于定义建立元素布局所用的定位类型，该属性有多个值：
值
描述
static
默认值。没有定位，元素出现在正常流中（忽略top,bottom,left,right或者z-index声明）。
relative
生成相对定位的标签，相对于标签原来位置进行定位。因此，“left:20”会向标签的left位置添加20像素。
absolute
生成相对定位的标签，相对于标签本身第一个position为非static父元素进行定位。标签的位置通过“left”,“top”,“right”以及“bottom”样式属性进行规定。如果该标签所在的父标签均没有设置position为非static，则相对于浏览器窗口进行定位，但是此时元素会随着滚动调的滑动而滑动。
fixed
生成绝对定位的标签，相对于浏览器窗口进行定位，此时元素不会随着滚动调的滑动而滑动。元素的位置通过"left","top","right"以及"bottom"属性进行规定。
（文档流又称正常流，是默认情况下html元素排版布局过程中元素会自动按照自上而下或从左往右进行流式排放的一种顺序）
注意：任何元素都可以定位，但absolute或fixed元素会生成一个块级框，不论该元素本身是不是块级框。relative元素会相对于它在正常流中的默认位置偏移。IE浏览器都不支持"inherit"属性值。
当一个标签使用了positionCSS样式属性，如果其样式属性值为非static（不考虑inherit）则该标签将脱离正常文档流，如果又没有指定“left”,“top”,“right”以及“bottom”样式属性的属性值，则该标签只待在原来位置，但已经脱离正常文档流
下为演示代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
#z{
width:300px;
height:300px;
border:1pxsolidroyalblue;
position:relative;
}
#a,#b,#c{
width:100px;
height:100px;
}
#a{
background:red;
position:relative;
right:10px;
}
#b{
background:green;
position:fixed;
left:1000px;
bottom:20px;
}
#c{
background:yellow;
position:absolute;
left:10px;
bottom:3px;
}
</style>
</head>
<body>
<divid="z">
<divid="a"></div>
<divid="b"></div>
//加空格用于复习div的块级元素性质
<divid="c"></div>
//加了空格后，c的div会自动换行block的属性所致
</div>
</body>
</html>
演示注释：
position中：
relative是相对于标签原来的位置点进行定位的仍存在于文档流中
fixed是相对于整个浏览器来定位的直接无视浏览器里面的标签元素类似于“浮起来”了
absolute是相对于上一级[如.b对z]第一个（父）元素（要求为非static属性）来定位的而且定位标准是依据父元素的外界边框来确定的
关于“css样式布局中position属性有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: css样式布局中position属性有什么用
本文链接: https://lsjlt.com/news/90227.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0