HTML CSS 定位 position
来源:互联网 发布:虚拟固话软件 编辑:程序博客网 时间:2024/05/22 00:42
定位
方位:
left right top bottom
position 属性
属性值:
static静态定位(默认)absolute绝对定位(脱标)relative相对行为fixed固定定位1.静态定位
用法:
position: static
静态定位就是元素标准流的显示方式。
2.绝对定位
用法:
position:absolute;
元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的位置。
特点:
a.当给一个单独的元素设置绝对定位,以浏览器左上角(body)为基准设置定位的。
b.当盒子发生嵌套关系的时候,如果父盒子(多层嵌套时,子盒子的各级父元素都没有设置定位)没有设置定位,子盒子设置定位以浏览器左上角(body)为基准设置定位。
c.当盒子发生嵌套关系的时候,如果父盒子设置定位(position: relative | absolute;),子盒子设置定位以父盒子左上角为基准设置定位。
当有多层嵌套时,以最近一级设置了定位的父元素为基准
d.给盒子设置了绝对定位,该盒子不占位置(脱离标准文档流,产生同样效果还有float属性)
e.给行内元素设置绝对定位后,该元素转化为了行内块元素
(将行内元素设置为行内块元素一共有三种方式:display: inline-block; | float: left | position: absolute;)
3.相对定位
用法:
position: relative
元素设置了相对定位后,通过具体的方位名称可以随便设置元素的位置。
特点:
a.元素设置了相对定位后占原来的位置(没有脱离标准文档流)
b.设置相对定位以自己的位置为参照设置位置
c.相对定位不能进行元素的模式转换(行内元素、块元素、行内块元素之间的转换)
4.固定定位
用法:
position:fixed;
元素设置了相对定位后,通过具体的方位名称可以设置元素相对于浏览器窗口(body)的位置,不受滚动等操作的影响。
特点:
a.固定定位不占位置(脱离文档标准流)
b.将行内元素转化为行内块元素
脱离标准文档流 —>将行内元素转换成行内块元素
- html css定位position
- HTML CSS 定位 position
- HTML&CSS——利用CSS定位背景图片 background-position
- CSS定位(position)
- CSS定位属性Position
- Css 之 position 定位
- css: position定位问题
- css定位中的position
- CSS定位position
- css-position定位
- CSS之position定位
- CSS中position定位
- CSS 定位position属性
- css position定位详解
- 【css实践】position定位
- DIV+CSS定位position
- CSS定位position属性
- CSS定位机制:position
- Linux 基本操作和相关命令
- koa2 入门及express应用迁移到koa2实例
- python里使用正则表达式的重复模式
- 用node从零开始去写一个简单的爬虫
- java写入文件的几种方法
- HTML CSS 定位 position
- 批量图片灰度化小程序
- Codeforces Round #439 C. The Intriguing Obsession (组合数)
- 基于Angular+express的定时爬虫信息综合application
- [DevExpress使用随笔]之RibbonReportDesigner控件
- HDFS SHELL命令大全
- 【SqlMap】SQL注入之初体验
- React中调用百度地图
- Spring面向切面编程——Spring实现AOP方式——通过Spring API实现