HTML5高级之position(定位)
position 属性规定元素的定位类型,定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position一般分为三种,一种是相对定位relative,一种是绝对定位absolute,一种是固定定位fixed,接下来分别说明这三个属性的用法以及相对应的特性,并举例说明。
1、position:relative 相对定位
特点:
1)不影响元素本身的特性;
2)不使元素脱离文档流(元素移动之后原始位置会被保留);
3)如果没有定位偏移量,对元素本身没有任何影响;
4)提升层级。
注:定位元素位置控制:top/right/bottom/left 定位元素偏移量
2、position:absolute 绝对定位
特点:
1)使元素完全脱离文档流;
2)使内嵌支持宽高;
3)块属性标签内容撑开宽度;
4)如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;
5)相对定位一般都是配合绝对定位元素使用;
6)提升层级
注意:
z-index:[number]; 定位层级
a、定位元素默认后者层级高于前者;
b、建议在兄弟标签之间比较层级
接下来用一个例子进行使用说明。
例子要求:如何将左边的三个div变成右边的三个div布局,即将div2的位置移动到如图的位置。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position: relative;}div{width: 100px;height: 100px;}.div1{background-color: pink;}.div2{background-color: yellow;position: absolute;left: 100px;top: 200px;}.div3{background-color: green;position: absolute;top:200px;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body>
</html>
这里做几点解释:
1)为什么body需要添加position:relative?
因为position:absolute这个属性会根据父级进行定位,如果没有定位父级则会相对于document发生偏移。而body在chrome浏览器中带有默认的样式,即带有margin属性,所以需要给body定义定位,这样后面的div就会根据body进行定位。
2)为什么div3中也需要添加position:absolute?
因为div2中添加属性position:absolute之后,就直接完全脱离文档流,那么div3的位置就会往上移动,为了实现效果,也需要在div3中添加同样的属性。
3、position:fixed 固定定位
与绝对定位的特性基本一致,唯一的差别是始终相对整个文档进行定位;
问题:IE6不支持固定定位;
4、其他定位
position:static ; 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)、
5、综合例子说明
做一个类似的弹窗效果。
代码:
我用了两种方法实现,一种就是上面总结的,都是利用div和position定位实现的,一种就是直接利用box-shadow属性实现的.
1)利用div和position定位实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>优酷弹幕</title><style>div{width:300px;height:300px;}.box{margin:100px auto;position: relative;}.content{background-color: green;position: absolute;left:-3px;top:-3px;z-index: 2;}.mark{background-color: #0c1315;position: absolute;right: -6px;bottom: -6px;z-index: 1;opacity: 0.5;}</style>
</head>
<body><div class="box"><div class="content"></div><div class="mark"></div></div>
</body>
</html>
其中用到了三个比较重要的属性:
a】position 定位
b】z-index 定位层级
c】opacity 透明度
标准 不透明度: opacity:0~1;
IE 滤镜: filter:alpha(opacity=0~100);
2)利用box-shadow属性实现
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>优酷弹幕2</title><style>.box{width:300px;height:300px;margin:100px auto;background-color: green;box-shadow:6px 6px 0px #727272;}</style>
</head>
<body><div class="box"></div>
</body>
</html>
HTML5高级之position(定位)相关推荐
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- Canvas+html+css+position定位
定位Position样式 浮动毛病: 会让出文档流,会影响后面的元素的布局. 如果父元素是width:100%,没办法做到均分宽度和间隙,如果父元素是固定宽度情况,可以通过切蛋糕的方式进行计算. 概述 ...
- HTML5 Geolocation(地理定位)简介
HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否 ...
- CSS position 定位知识细节
文章传送门:详解css定位与定位应用 position定位的定义: 在CSS中关于定位的内容是:position:relative | absolute | static | fixed static ...
- 元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是 一样的,说到底还是对z-index的理解比较模糊,可以解决问 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- css - Position定位属性与层级关系
今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 ...
- Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...
- css 定位连线_CSS Position(定位)
CSS Position(定位) CSS position属性用来指定元素如何在页面上定位,CSS Position(定位)的方式有以下几种:静态定位(static),绝对定位(absolute),相 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
最新文章
- linux shell expr 使用
- Python入门100题 | 第056题
- 一文详解神经网络与激活函数的基本原理
- 一些非常有用的链接和工具
- n皇后问题c语言_用栈解决N皇后问题(C语言)
- Wireshark-001基本设置
- PTA 5-10 Saving James Bond-Easy (25) - 图 - DFS
- Logistic回归小结
- 几种常见机器学习距离公式
- AP聚类算法(Affinity propagation Clustering Algorithm )
- Unity碰撞和触发
- git pull拉去不到最新代码 更新不出来代码
- mac的 tr命令_tr命令 - Holy_Shit - 博客园
- linux入门学习1之FastQC
- O2O、B2B、C2C(通俗讲解)
- UiBot If(如果条件成立)
- 数据可视化如何实现?4大基本流程了解一下
- python开发的录音机(二)让鼠标点击与开始录音同步(录制与回放鼠标宏)
- 【形式化方法】Part B: SAT And Validity(SAT和有效性)
- 【蓝桥杯-筑基篇】基础入门
热门文章
- 技师学院计算机老师,技师学院计算机工程系组织开展观摩课活动
- 组态王报警历史存MySQL_组态王6.55报警存储与历史数据查询设置全过程
- 考研备考建议篇——论文怎么投稿
- [一起来做动图吧]Animate制作简单动图,包教包会,不会举报
- ubuntu20.04安装并运行ORB_SLAM3(一路顺风版)
- 计算机为动态分区无法安装系统,磁盘动态分区形式的电脑怎么重装系统win10
- 2021年7月最新iOS面试题总结(答案篇)
- aid learning安装应用_aid learning更换源
- 智能仓储系统作业流程及价值
- 面试中的Singleton