CSS中常用的几种定位方式(常用的css样式有哪些)

CSS中常用的几种定位方式

推荐整理分享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>

页面显示的样式是：

 以上就是几种定位方式。