css定位方式有哪几种
时间:2021-04-09
来源:互联网
标签:
今天PHP爱好者给大家带来css定位方式有5种:1、浮动定位(float)。2、static(静态定位);没有定位,元素出现在正常的流中。3、relative(相对定位);元素脱离正常的文档流。4、absolute(绝对定位)。5、fixed(固定定位)。希望对大家有所帮助。

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。
复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。
float定位(即浮动定位):
这种定位方式很简单,只需规定一个浮动的方向(如:float:left;就表示这个元素向左边摆放),它的定位是相对于父元素容器;
如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素若要不受影响,则要在后面清除浮动(可用clear:both;等方法),在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。
position定位:
position定位是指定位置的定位,以下为常用的几种:
1、static(静态定位):
当我们没有指定定位方式的时候,这时默认的定位方式就是static,也就是按照文档的书写布局自动分配在一个合适的地方,这种定位方式用margin来改变位置,对left、top、z-index等设置值无效,这种定位不脱离文档流;
2、relative定位(相对定位):
该定位是一种相对的定位,可以通过设置left、top等值,使得指定元素相对其正常的位置进行偏移,这种定位不脱离文档流;
3、absolute定位(绝对定位):
这种定位通过设置top、right、bottom、left这些偏移值,相对于 static 定位以外的第一个父元素进行定位(这种定位通常设置父元素为relative定位来配合使用),在没有父元素的条件下,它的参照为body,该方式脱离文档流;
4、fixed(固定定位):
这种定位方式是相对于整个文档的,只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,通常用来显示一些提示信息,脱离文档流;
以上就是css定位方式有哪几种的详细内容,更多请关注php爱好者其它相关文章!
-
什么是无理数 常见的无理数有哪些 无理数和有理数的区别 时间:2025-11-19 -
Linux中软连接和硬链接的区别、优缺点和应用场景等 时间:2025-11-19 -
什么是Hypervisor Hypervisor虚拟机监控程序详解 时间:2025-11-19 -
numeric是什么数据类型 decimal和numeric的区别 时间:2025-11-19 -
Java中public class和class的区别 时间:2025-11-19 -
Android中Activity跳转的两种实现方法 时间:2025-11-19
今日更新
-
《米饭仙人》手游正式入口
阅读:18
-
币安风控原因不透明?深度解析其背后逻辑与用户应对策略
阅读:18
-
高德地图网页版入口在哪 在线使用指南
阅读:18
-
上高速的梗是什么意思?揭秘网络热词背后的搞笑真相!
阅读:18
-
《一耽女孩》官方入口地址
阅读:18
-
微信视频号官网网页版入口 视频号助手电脑端登录通道
阅读:18
-
币安风控是否受第三方DApp交互影响?解析关键因素
阅读:18
-
重返未来:1999策略阵容构筑玩法-小怪物翻斗棋明日开启
阅读:18
-
燕云十六声不见山万事知-不见山故岁辞怎么做
阅读:18
-
CF手游王者81式武器王者之尊现世-为十周年武器
阅读:18










