位置: IT常识 - 正文
CSS中常用的几种定位方式(常用的css样式有哪些)
发布时间：2024-01-16推荐整理分享CSS中常用的几种定位方式(常用的css样式有哪些)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css中常用的几种注释方式,css有哪些,css有哪些,常用的css样式有哪些,css 常用,css中常用的几种注释方式,css中常用的几种注释方式,css中常用的几种注释方式,内容如对您有帮助，希望把文章链接给更多的朋友！
定位的基本语法：
position:方式top: 多少px;right: 多少px;left: 多少px;bottom: 多少px;有常用的几种方式，如下：
第一种：相对定位 relative首先，相对，就是相对某一位置，这里指的是相对原来的位置，不脱离标准文档流。
那么标准文档流是什么？
就是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
我们在这里先写一个样式：
这是两个块级元素：
<div class="box1"></div><div class="box2"></div>现在给他们添加简单样式：
<style> .box1 { width: 50px; height: 50px; background-color: pink; position: relative; top: 10px; left: 10px; } .box2 { width: 20px; height: 20px; background-color: skyblue; }</style>在不添加定位时，页面显示是这样的：
在添加相对定位以后，页面显示是这样的：
可以看出粉色的相对于他原来的的位置，距离顶部和左边都是10px。这就是相对定位。
第二种：绝对定位 absolute绝对定位通常发生父子标签中，脱离标准文档流，不保留原本的位置。
这里要分为两种情况：
情况一：无父亲 或 父亲无定位
同样先写一个有父子关系的标签：
<div class="father"> <div class="son"></div></div>然后给他们添加样式：情况一父标签中没有定位
<style> .father { margin-top: 50px; margin-left: 50px; width: 100px; height: 100px; background-color: skyblue; } .son { position: absolute;//绝对定位 top: 20px; left: 20px; width: 50px; height: 50px; background-color: pink; } </style>在字标签中中没有定位时：
注意：此时父标签连带着子标签距离页面左边和顶部都有50px的距离。
在字标签中中添加有定位时：
由于直系父标签中没有定位，所以字标签会一直向上查找，直到找到有定位的父标签，这个案例中，找到的就是页面。所以它的绝对定位，是距离页面的定位，左边和顶部各相距10px.如图：
情况二：父亲有定位
还是上面情况一的案例，我们此时添加一个相对定位给父标签：position: relative，
看看会有什么变化？
.father { position: relative; margin-top: 50px; margin-left: 50px; width: 100px; height: 100px; background-color: skyblue; }字标签是相对于父标签的绝对定位。
第三种：固定定位 fixed还是一样，写一个测试标签
<div class="divA"> <img src="./img/羊驼.jpg" height="100px" width="120px"></div><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p><p>这是一段文字</p>...//页面上写很多字 用来测试现在给div块添加样式，加一个固定定位：
<style> .divA{ position: fixed; top: 100px; left: 40px; } </style>这个图片的位置是固定的，就算在文字很多的情况下，也不随鼠标的滚动而变动。
这有点像我们在网页有时候会碰到的悬浮广告，或者手机上的悬浮按钮，当然没有手机那么高级，有兴趣的可以试下。
固定定位还有一个特点，就是加入别的块占了他要固定的位置，他就会环绕着这个块分布。
第四种：粘性定位 sticky粘性定位使用时：
父元素不能overflow:hidden或者overflow:auto属性。
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效
同样先写一个父子块：
<div class="nav"> <div class="navSon"></div></div>并添加样式；
<style> .nav{ width: 100px; height: 100px; background-color: pink; } .nav .navSon{ position: sticky; top: 20px; left: 20px; width: 50px; height: 50px; background-color: skyblue; } </style>页面显示的样式是：
以上就是几种定位方式。
下一篇：OpenCV这么简单为啥不学——1.5、解决putText中文乱码问题(opencv dng)
