【CSS笔记】CSS布局之五种定位方式(静态、相对、绝对、固定、粘性)
目录
一、CSS定位布局
1.1、static静态定位
1.2、relative相对定位
1.3、fixed固定定位
1.4、absolute绝对定位
(1)默认绝对定位参考点
(2)设置绝对定位参考点
1.5、sticky粘性定位
(1)sticky粘性定位失效的原因
(2)sticky案例
一、CSS定位布局
CSS定位布局,是通过【position】属性设置的,position属性可以有如下五个取值:
【position】属性取值:
- static:静态定位。
- relative:相对定位。
- fixed:固定定位。
- absolute:绝对定位。
- sticky:粘性定位。
给元素设置【position】属性之后,设置元素的定位方式,然后再通过【top、left、right、bottom】四个属性设置定位的位置。
注意:如果设置了position属性,但是没有设置【top、left、right、bottom】属性,那么position属性不会生效。
1.1、static静态定位
static静态定位,这种是元素默认的定位方式,也就说,没有设置position属性,和设置了【position:static;】属性,这个元素的显示效果是一样的。【top、left、right、bottom】四个属性对于static静态定位来说,是没有效果的。
1.2、relative相对定位
relation相对定位,这个属性是相对于元素自身位置定位的,也就是说,某个元素使用相对定位之后,它是以没有使用相对定位之前显示的位置为参考点,上下左右移动多少距离,下面看个案例。
相对定位的特点:
- 相对定位,是以元素自身为参考系。
- 相对定位,默认会覆盖其他没有定位的元素。
- 相对定位,要使用了【top、left、right、bottom】属性才会生效。
- 相对定位,元素定位之前的空间位置还是保留的,不会被其他元素占据。
- 注意:相对定位是没有脱离文档流的(从相对定位的元素还保留之前的元素空间也可以知道,脱离文档流必定不会占据之前的元素空间)。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position定位</title><style>div > div {width: 100px;height: 100px;text-align: center;line-height: 100px;float: left;border: 2px solid black;}.a {background-color: cadetblue;}.b {background-color: chocolate;position: relative;top: 50px;left: 50px;}.c {background-color: cornflowerblue;}</style>
</head>
<body><div><div class="a">盒子1</div><div class="b">盒子2</div><div class="c">盒子3</div></div>
</body>
</html>
1.3、fixed固定定位
fixed固定定位,它是相对于浏览器窗口进行定位的,当页面发生滚动的时候,fixed固定定位不会被影响,固定定位始终是固定在一个位置。
案例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position定位</title><style>body {padding: 100px;height: 2000px;}body > div {width: 400px;height: 200px;background-color: antiquewhite;}div > div {width: 100px;height: 100px;text-align: center;line-height: 100px;float: left;border: 2px solid black;}.box {padding: 30px;}.a {background-color: cadetblue;}.b {background-color: chocolate;position: fixed;top: 50px;left: 50px;}.c {background-color: cornflowerblue;}</style>
</head>
<body><div class="box"><div class="a">盒子1</div><div class="b">盒子2</div><div class="c">盒子3</div></div>
</body>
</html>
固定定位特点:
- 固定定位,是特殊的绝对定位,所以固定定位有绝对定位的特点。
- 固定定位,屏幕滚动时候,固定定位的元素位置不会发生变化。
- 固定定位,是脱离文档流的。
1.4、absolute绝对定位
(1)默认绝对定位参考点
absolute绝对定位,默认情况下,元素使用绝对定位之后,它是相对于浏览器屏幕左上角为参考点进行定位的,准确点说,是相对于浏览器内容可见区域的左上角为原点。
设置元素的【position】属性值等于【absolute】绝对定位之后,如果没有设置【top,left、right、bottom】属性,那么就会默认都是0,这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。
案例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position定位</title><style>body > div {width: 400px;height: 200px;background-color: antiquewhite;}div > div {width: 100px;height: 100px;text-align: center;line-height: 100px;float: left;border: 2px solid black;}.a {background-color: cadetblue;}.b {background-color: chocolate;position: absolute;top: 50px;left: 50px;}.c {background-color: cornflowerblue;}</style>
</head>
<body><div><div class="a">盒子1</div><div class="b">盒子2</div><div class="c">盒子3</div></div>
</body>
</html>
(2)设置绝对定位参考点
CSS也支持相对于某个元素,进行绝对定位,也就是说,可以自定义当前元素是以哪个元素为参考点,从而完成绝对定位。要相对于父元素使用绝对定位,那么就必须给父元素设置【position】属性,属性值取【relative、absolute、fixed、sticky】四种都可以。
案例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position定位</title><style>body {padding: 100px;}body > div {width: 400px;height: 200px;background-color: antiquewhite;}div > div {width: 100px;height: 100px;text-align: center;line-height: 100px;float: left;border: 2px solid black;}.box {padding: 30px;/* 设置 position 属性,让子元素可以使用绝对定位 */position: relative;}.a {background-color: cadetblue;}.b {background-color: chocolate;position: absolute;top: 50px;left: 50px;}.c {background-color: cornflowerblue;}</style>
</head>
<body><div class="box"><div class="a">盒子1</div><div class="b">盒子2</div><div class="c">盒子3</div></div>
</body>
</html>
绝对定位特点:
- 绝对定位,默认是以屏幕左上角为参考点。
- 绝对定位,是会脱离文档流,不会占据元素的位置。
- 绝对定位,默认会覆盖没有定位的元素。
- 相对父元素的绝对定位,会按照最近的设置了【position】属性的祖先元素进行绝对定位(就近原则)。
1.5、sticky粘性定位
sticky粘性定位,这个定位属性是【position:sticky;】,需要至少设置【top、left、right、bottom】四个属性之一,否则不生效。sticky粘性定位,可以看作是:【static静态定位】和【fixed固定定位】的结合体,最开始默认是static静态定位,当相对于父元素满足定位条件的时候,sticky粘性定位就会由static静态定位转变为fixed固定定位。
(1)sticky粘性定位失效的原因
sticky粘性定位不生效的原因可能有如下几个原因:
- 父元素不能添加【overflow:hidden;】或者【overflow:auto;】属性值。
- 元素自身必须设置【top、left、right、bottom】四个属性之一,否则就相当于静态定位。
- 父元素的高度必须大于使用了sticky粘性定位元素的高度。
- sticky定位只能够在其父元素里面生效。
(2)sticky案例
案例效果:
案例代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>position定位</title><style>body {padding: 100px;height: 2000px;}.box>div {width: 100px;height: 100px;text-align: center;line-height: 100px;float: left;border: 2px solid black;}.a {background-color: cadetblue;}.b {background-color: chocolate;}.c {background-color: cornflowerblue;}.box4 {width: 100%;height: 60px;text-align: center;background-color: darkkhaki;clear: both;/* 设置粘性定位 */position: sticky;top: 50px; /* 当距离父容器顶部50px时候,转换为固定定位 */}</style>
</head><body><div class="box"><div class="a">盒子1</div><div class="b">盒子2</div><div class="c">盒子3</div></div><div class="box4">盒子4,采用sticky粘性定位</div>
</body></html>
以上,就是CSS中的五种定位方式,其中会脱离文档流的只有【绝对定位】。
【CSS笔记】CSS布局之五种定位方式(静态、相对、绝对、固定、粘性)相关推荐
- CSS中常用的几种定位方式
定位的基本语法: position:方式 top: 多少px; right: 多少px; left: 多少px; bottom: 多少px; 有常用的几种方式,如下: 第一种:相对定位 relativ ...
- CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- [css] 说下line-height三种赋值方式有何区别?
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
- 自动化的8种定位方式
自动化的8种定位方式 1.id属性 2.name属性 3.class属性 4.标签名 5 6 .链接元素 link_text #完全匹配 #模糊匹配 7 8. xpath =ZZ 易懂 css = 难 ...
- Selenium八种定位方式
八种定位方式分别是:id.name.class name.tag name .link text.partial link textxpath.css selector. 元素标签或者元素属性:id. ...
- HTML的几种定位方式
HTML中的几种定位方式 相对定位 绝对定位 固定定位 定位详解 定位也是用来布局的,它由两部分组成:定位=定位模式 + 边偏移 边偏移 边偏移属性 示例 描述 top top:80px 顶端偏移量, ...
- android中几种定位方式详解
目录 前言: 1.GPS定位 2.NETWORK定位 3.AGPS定位 4.基站定位 5.WIFI定位 6.混合定位 目前,移动端大致通过三种方式来进行设备定位:GPS.基站.wifi.本文就详细的讲 ...
- python自动化测试xpath_selenium自动化测试:5.xpath八种定位方式
0.前言 如果可以的话,请先关注(专栏和账号),然后点赞和收藏,最后学习和进步.你的支持是我继续写下去的最大动力,个人定当倾囊而送,不负众望.谢谢!!! 1.前提 基于win10专业版64位系统+64 ...
最新文章
- vmware 添加 磁盘 空间
- vue常见错误汇总(自看)
- Hadoop学习笔记五
- linux-常用指令3
- 2压缩备份数据库_为什么您的企业需要备份数据库
- 企业私有云的建立—基于Ubuntu Enterprise Cloud(3)
- 帝国 listenews.php,帝国cms7.2后台信息列表页批量添加tags
- Netty中的Channel之数据冲刷与线程安全(writeAndFlush)
- Ajax 重新绑定 webgrid 数据,绑定WebGrid表单AJAX
- mac 远程连接 Windows 桌面
- win10无法msi文件的解决方法
- 计算机应用职业的外部环境,完整的职业生涯规划书范文
- 每日一题:42. 接雨水
- 链新:区块链大赛火热,成为技术与创意的练兵场
- office2010 打开报错 无法访问您试图使用的功能所在的网络位置,安装包ProPlusrWW.msi
- 服务器维修预算申请,云服务器费用预算申请范文
- 10. 大数据:人工智能的基石
- 华为开发者大会2021鸿蒙系统,鸿蒙2.0来了!华为开发者大会HDC 2020宣布
- js 获取重定向后的地址
- 欧盟委员会的目标是在国际舞台上为欧盟开发区块链技术的共同方法。
热门文章
- Android 手机银行安全性研究 (转)
- python tkinter获取屏幕大小_Python GUI编程|使用Tkinter制作快递查询软件
- 跨境电商平台如何搭建
- android最新版本下载vivo,vivo浏览器最新版下载-vivo浏览器 安卓版v7.6.16.1-PC6安卓网...
- 视频监控系统中的平台服务器,视频监控系统中的服务器
- matlab 职坐标,Axure入门与基础常用函数解析整理
- summernote html标签,关于summernote编辑器代码段html的插入问题
- Zabbix2.4 之自定义监控图表、报警机制
- 大唐c语言面试题库,大唐移动笔试题
- 如何快速的Github下载超具体操作