定位的基本语法：
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>页面显示的样式是：
文章来源：https://www.toymoban.com/news/detail-448107.html
以上就是几种定位方式。文章来源地址https://www.toymoban.com/news/detail-448107.html
到了这里，关于CSS中常用的几种定位方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
