css position 几种定位
绝对定位:position:absolute 绝对定位使元素的位置与文档流无关,因此不占据空间。 绝对定位的元素的位置相对于最近的已定位祖先元素(absoulte、relative),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 相对定位:position:relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。 绝对定位:position:fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身,不在是相对于最近的已定位祖先元素
另外z-index的使用 好像作用在定位上有效
css position 几种定位的更多相关文章
- CSS的4种定位方式比较
CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- css position 5种不同的值的用法
position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...
- CSS的四种定位的参照物
一.static定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. <!DOCTYPE html&g ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- CSS的两种格式化上下文:BFC和IFC
CSS的两种格式化上下文 文章包含很多个人理解,如果错误,欢迎指出~ 在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
随机推荐
- Wannafly交流赛1 B 硬币[数学思维/贪心]
链接:https://www.nowcoder.com/acm/contest/69/B来源:牛客网 蜥蜴的生日快到了,就在这个月底! 今年,蜥蜴的快乐伙伴之一壁虎想要送好多个1元硬币来恶整蜥蜴. 壁 ...
- Nowcoder Girl 参考题解【待写】
[官方题解]:https://www.nowcoder.com/discuss/65411?toCommentId=1134823 [题目链接]:https://www.nowcoder.com/te ...
- usaco-Subset Sums
题意: 给出一个1-n的数列,求把它分为两组数使得两组数的和相等的方案数. 分析: 如果可能分成两组,那么(n+1)n/2一定为偶数,且n%4=2或3.可以设dp[i][j]表示从1-i中的数拼出的方 ...
- idea---搭建maven,tomcat入门
这篇随笔讲讲idea工具的安装和使用和在idea中搭建maven的分享. 一.概念 1.IntelliJ IDEA是什么? DEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境. ...
- Factory Method 和AbstractFactory
对应慕课视频的连接:https://www.imooc.com/video/5316 1,工厂模式的应用场景 有一组类似的对象需要被创建 在编码时不能预见需要被创建哪种类的实例 在系统需要考虑扩展性的 ...
- linux查看端口状态相关命令
netstat netstat 命令应用是比较频繁的,比如查看端口占用啦,查看端口进程啦,这些时候都是有必要的. netstat命令各个参数说明如下: -t : 指明显示TCP端口 -u : 指明显示 ...
- PS中把图片白色背景变成透明的方法
用魔术橡皮擦擦去白色(调整容差,取消连续,点选白色部分),保存成png格式
- linux下ftp、telnet的安装和使用
1.ftp的安装和使用 一般在各种linux的发行版中,默认带有的ftp软件是vsftp. 使用如下命令#rpm -qa | grep vsftpd可以检测出是否安装了vsftpd软件,如果没有安装, ...
- 【C语言 C++】简单keywordRegister,Const,Static,Volatile,typedef,Define的理解
Register 用register声明的变量称着寄存器变量,在可能的情况下会直接存放在机器的寄存器 中.但对32位编译器不起作用.当global optimizations(全局优化)开的时候,它会 ...
- k8s学习(二)——etcdctl工具的使用
k8s的实现核心实际上就是通过读写etcd数据库实现对资源的存储,管理和控制. k8s所有资源的本源都是存储在etcd中的一个个键值对. 理论上可以观察到etcd数据库中的数据变化.具体的使用方式如下 ...