博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS(七)定位
阅读量:4700 次
发布时间:2019-06-09

本文共 714 字,大约阅读时间需要 2 分钟。

定位

一)元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1.边偏移

top、bottom、left、right,分别是元素父元素各个位置边线距离。

当然每次只能使用其中两个,比如top,left。

2.定位模式

在CSS中,position属性用于定义元素的定位模式,语法:position: static | relative | absolute | fixed

1)静态定位(static)

静态定位是所有元素的默认定位方式,是各个元素在html文档流中的默认位置。其实就是标准流的特性。

2)相对定位(relative)

以自己的左上角为基准点进行移动。移动后不会脱标。

3)绝对定位(absolute)

绝对定位跟浮动一样,不占位置。

父级元素无定位时:基准点:当前屏幕,与父元素完全无关。

父级元素有定位时:依据最近的已经定位的父级元素(绝对、固定或相对)的父元素(祖父)进行定位。

注意:加了定位和浮动的盒子margin: 0 auto;会失效。此时怎么让盒子居中对齐呢?

用绝对定位left:50%  然后margin-left自己的一半

4)固定定位(fixed)

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。

注意:跟浮动一样元素添加了绝对定位与固定定位后,元素会转换为行内块。

二)叠放次序(z-index)

当对多个元素同时定位时,定位元素之间可能会发生重叠。

在CSS中想要想要调整重叠元素的堆叠顺序,可以使用z-index。

取值越大越在上面。

 

转载于:https://www.cnblogs.com/Shadowplay/p/11013777.html

你可能感兴趣的文章
W3100SM-S 短信猫代码发送 上
查看>>
Linux IO模式及 select、poll、epoll详解
查看>>
Log4j知识汇总
查看>>
[译]快照技术综述 Ⅰ
查看>>
vSphere 高级特性FT配置与管理
查看>>
mac find桌面显示desktop问题
查看>>
Computer Systems A Programmer's Perspective(深入理解计算机系统)第一章读书笔记
查看>>
语义分析
查看>>
mybatis之xml中日期时间段查询的sql语句
查看>>
污染物在线自动监控(监测)系统数据传输标准 (HJ212-2017)-空气质量监测数据包构造...
查看>>
【Python】django模型models的外键关联使用
查看>>
httperf ---linux web站点压力测试
查看>>
JAVA基础知识(五)数据类型转换
查看>>
hdu-5583 Kingdom of Black and White(数学,贪心,暴力)
查看>>
算法与设计模式
查看>>
(4)理解 neutron ml2---port创建流程代码解析
查看>>
python List
查看>>
Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'userinfo.
查看>>
免费资源:Polaris UI套件 + Linecons图标集(AI, PDF, PNG, PSD, SVG)
查看>>
http响应状态码大全
查看>>