博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS学习路程-定位position
阅读量:5292 次
发布时间:2019-06-14

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

定位的内容是:position:relative | absolute | static | fixed。

一、static: 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在文本流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS依然使得这些元素可以改变自己的位置,可以通过float让元素浮动,也可以通过margin来让元素产生位置移动。
二、fixed :固定定位,他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
三、relative:相对定位,不脱离文档流,参考自身静态位置通过 top(上),bottom(下),left(左),right(右) 定位,并且可以通过z-index进行层次分级。
     

 

四、absolute:绝对定位,脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
       

 

注:CSS中定位的层叠分级:z-index: auto | namber;

auto 遵从其父对象的定位

namber 无单位的整数值。可为负数

转载于:https://www.cnblogs.com/zouyh269980027/p/9890916.html

你可能感兴趣的文章
变量提升
查看>>
线性表可用顺序表或链表存储的优缺点
查看>>
在现有的mysql主从基础上,搭建mycat实现数据的读写分离
查看>>
[Flex] flex手机项目如何限制横竖屏?只允许横屏?
查看>>
tensorflow的graph和session
查看>>
6-1 并行程序模拟 uva210
查看>>
JavaScript动画打开半透明提示层
查看>>
Mybatis生成resulteMap时的注意事项
查看>>
jquery-jqzoom 插件 用例
查看>>
1007. Maximum Subsequence Sum (25)
查看>>
《算法》C++代码 快速排序
查看>>
iframe的父子层跨域 用了百度的postMessage()方法
查看>>
Js apply方法与call方法详解 附ES6新写法
查看>>
linux php全能环境一键安装,小白福利!
查看>>
图片生成缩略图
查看>>
关于Mysql select语句中拼接字符串的记录
查看>>
动态规划 例子与复杂度
查看>>
[BZOJ4567][SCOI2016]背单词(Trie+贪心)
查看>>
查看oracle数据库的连接数以及用户
查看>>
【数据结构】栈结构操作示例
查看>>