css定位
程序员文章站
2022-04-25 11:39:09
...
静态定位
系统默认的定位方式,没有定位的意思在标准流的范围内
.class {
positon:static;
}
相对定位
相对定位是相对于盒子原本位置的基础上做出的位置变动。
盒子并未脱离标准流,所以在盒子移动以后,原本的位置仍然保留。
.class{
positon: relative;
top:20px;
left:20px;
}
绝对定位
绝对定位如果其没有父盒子,或者父盒子没有定位,则以浏览器为准作为定位
当父盒子有定位时,以最近父盒子为准进行定位
绝对定位不占有原先的位置,在设置了绝对定位以后,后面的盒子占有该位置。
.class {
position: absolute;
top :20px;
left: :20px;
}
子绝父相
两个盒子要相互叠加,在叠加的时候,需要用父盒子约束子盒子,所以要给父盒子添加 定位,但是因为父盒子需要占有位置,不然后面的盒子会上升填充该位置,所以父盒子使用相对定位。子盒子需要叠加*移动的话,就使用绝对定位,以父盒子作为标准进行位置设置。
固定定位
以浏览器的可视窗口作为标准,相对于窗口的位置不变
不占有原先的位置。
.class {
positon :fixed;
top:20px;
right:20px;
}
粘性定位
使用少,以js实现,以浏览器的可视区作为参照,所以在到达可视区边界就停止移动了
.class{
positon:sticky;
top:20px;//必须添加至少一个(top button left right )值
}
推荐阅读
-
css多栏自适应布局_html/css_WEB-ITnose
-
Less 官方文档学习笔记_html/css_WEB-ITnose
-
学习淘宝网页中的代码_html/css_WEB-ITnose
-
第 17 章 CSS 边框与背景[下] - 水之原
-
Discuz!NT 3.5论坛模版_html/css_WEB-ITnose
-
div遮盖问题_html/css_WEB-ITnose
-
9年后 玩家终于确切定位《我的世界》菜单页背景地坐标
-
jQuery的显示和隐藏方法与css隐藏的样式对比_jquery
-
css3实现iPhone滑动解锁_html/css_WEB-ITnose
-
网页上的.swf如何下载?帮我看看这个怎么下载_html/css_WEB-ITnose