css规则中区块block,CSS 定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position
position 属性的作用
position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即position属性主要有五个值
static
relative
fixed
absolute
sticky
1. static (默认值)
static是position属性的默认值。如果省略position属性,浏览器就认为该元素是static定位。
这时,浏览器会按照源码的顺序,决定每个元素的位置,这称为"正常的页面流"(normal flow)。每个块级元素占据自己的区块(block),元素与元素之间不产生重叠,这个位置就是元素的默认位置。
代码:
.container {
border: 1px solid black;
}
.container .cell {
width: 40px;
height: 40px;
background: red;
margin-top: 10px;
position: static;
}
注意,static定位所导致的元素位置,是浏览器自主决定的,所以这时top、bottom、left、right这四个属性无效
2. relative
relative表示,相对于默认位置(即static时的位置)进行偏移,即定位基点是元素的默认位置。
.container {
border: 1px solid black;
}
.container .cell {
width: 40px;
height: 40px;
background: red;
margin-top: 10px;
}
.container .cell:first-child {
position: relative;
left: 20px;
}
3.absolute
absolute表示,相对于上级元素(一般是父元素)进行偏移,即定位基点是父元素。*(父元素不能是static)
注意,absolute定位的元素会被"正常页面流"忽略,即在"正常页面流"中,该元素所占空间为零,周边元素不受影响。
.container {
border: 1px solid black;
position: relative;
}
.container .cell {
width: 40px;
height: 40px;
background: red;
margin-top: 10px;
}
.container .cell:first-child {
position: absolute;
left: 20px;
top: 5px;
}
4.fixed
fixed表示,相对于视口(viewport,浏览器窗口)进行偏移,即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化,好像固定在网页上一样
.container {
border: 1px solid black;
position: relative;
}
.container .cell {
width: 40px;
height: 40px;
background: red;
margin-top: 10px;
}
.container .cell:first-child {
position: fixed;
bottom: 20px;
}
3. sticky
sticky跟前面四个属性值都不一样,它会产生动态效果,很像relative和fixed的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。
sticky生效的前提是,必须搭配top、bottom、left、right这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作sticky的生效门槛。
它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口时(即完全不可见),fixed定位自动切换回relative定位。
请看下面的示例代码。(注意,除了已被淘汰的 IE 以外,其他浏览器目前都支持sticky。但是,Safari 浏览器需要加上浏览器前缀-webkit-。)
因此,它能够形成"动态固定"的效果。比如,网页的搜索工具栏,初始加载时在自己的默认位置(relative定位)。
.container {
border: 1px solid black;
height:1000px;
}
.container .cell {
width: 40px;
height: 40px;
background: red;
margin-top: 10px;
}
.container .header {
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
text-align: center;
background: yellow;
top: 0;
}
sticky定位可以实现一些很有用的效果。除了上面提到"动态固定"效果,这里再介绍两个
标签:40px,定位,container,元素,relative,详解,position,CSS
来源: https://www.cnblogs.com/huancheng/p/12068669.html
css规则中区块block,CSS 定位详解相关推荐
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由 伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块 区块的定义是:一个逻辑和 ...
- css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解
本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...
- CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法 首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
- ng bootstrap css,Angular2中Bootstrap界面库ng-bootstrap详解
准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ...
- css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动 一.选择器 选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
- 定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要 腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
最新文章
- TensorFlow实现一元线性模型
- APP测试和传统软件测试有什么区别
- 上传文件大小的配置Webcong
- Android移动开发之【Android实战项目】DAY14-修改json里某个字段的值
- IIS Express总结
- docker修改默认存储位置
- 如何使用 React 创建一个作品集网站
- 面试官:Redis中的缓冲区了解吗
- matlab时频分析工具箱安装_科研小班 | 加州大学伯克利分校 | 物理、电子工程:MATLAB信号和数据处理课题...
- Effective JavaScript Item 40 避免继承标准类型
- 视频监控系统运维解决方案
- linux tar压缩文件命令,tar打包压缩文件命令
- 数据中心存储改造方案
- 本人成功续费了。你的支付授权失败。请核对你的信息并重试,或尝试其他支付方式。请联系你的银行了。
- 塞班s60v3手电筒sisx_塞班s60v3闪光灯手电筒软件可以发给我吗?谢谢!
- P2404 自然数的拆分问题
- 一个仿微博TextView 筛选,直接使用的工具类
- 【本科课程】数电复习题
- 【双系统】win10和ubuntu双系统(UEFI)删除ubuntu
- (译)一个完整的Django入门指南---第7部分
热门文章
- java drawimage 本地,java drawimage()方法
- 计算机视觉论文总结系列(三):OCR篇
- python逻辑回归优化参数_逻辑回归模型怎么调整超参?
- git安装路径的更改
- 内连级元素有哪些_HTML内联元素有哪些?
- SAP License:看看你在哪个阶段
- 【使用Spring Cloud Gateway构建微服务网关】—— 每天一点小知识
- c语言国考试是什么软件下载,计算机等级考试C语言版2018最新
- Qtum智能合约使用方法及说明
- 低温烫伤?漏电?镍超标?雅萌Notime松下等美容仪安全性能检测结果