CSS定位属性(position)
声明:本文为作者的学习笔记,是参考了别的作者的文章,并非原创,参考的原文地址由于时间久远也不清楚了,如有冒犯,可以联系我删除,谢谢。
position static
元素都有position属性,默认值为static,默认情况下,元素不接受位置属性设置(top、right、bottom、left)。另外如果元素设置了position属性,将会覆盖其默认值“static”。
下面的演示中,所有盒子都是静态的(即static),每个盒子在相邻盒子顶部,都是块元素,没有进行浮动。
<div id="box-set" class="group"><div class="box">Box1</div><div class="box">Box2</div><div class="box">Box3</div></div>
#box-set{background-color: #eee;
}.box{background:lightgreen;height:100px;line-height: 100px;width: 100px;text-align: center;color:#fff;border-radius: 10px;
}
结果如下图IMG_1:
position relative
relative与static相似,但是relative可以给元素设置位移(offset)“top、right、bottom、left”属性,通过这些位移属性可以给元素进行精确的定位。
盒子的位移属性是如何工作的?
盒子的位移属性有四个“top、right、bottom、left”,用来指定元素的位置和方向。这些属性只能在元素设置了“relative、absolute和fixed”属性值时才有效。
相对定位(relative):是相对于元素本身移动。
绝对定位(absolute):是相对于设置了除static以外的第一个父元素进行定位的。
固定定位(fixed,生成绝对定位的元素):相对于浏览器窗口进行定位。
来看他们是如何工作的:
<div id="box-set" class="group"><div id="box" class="box-1">Box1</div><div id="box" class="box-2">Box2</div><div id="box" class="box-3">Box3</div><div id="box" class="box-4">Box4</div></div>
#box-set{background-color: #eee;
}#box{background:lightgreen;height:100px;line-height: 100px;width: 100px;text-align: center;color:#fff;border-radius: 10px;position: relative;
}.box-1{top:20px;}
.box-2{left:20px;}
.box-3{bottom:20px; /*top的优先级高*/top:20px;
}
.box-4{left:20px;right:20px; /*left的优先级高*/
}
可以看出,相对定位是相对于元素本身进行移动的。
当一个相对定位元素同时设置了“top”和“bottom”属性值时,top的优先级高于bottom。当一个相对定位元素同时设置了“left”和“right”属性值时,优先级取决于页面使用哪种语言,英文时,left优先级高,本例在中文情况下,left优先级高。
position absolute
绝对定位是相对于设置了相对定位的父元素进行移动的,如果父元素没有设置相对定位,那么该元素会相对于页面主体进行移动。
绝对定位元素会脱离文档流,直接从文档流中移出。
当绝对定位元素没有设置属性值时,绝对定位元素会和设置了相对定位元素的父元素顶部左部重合,设置了值后会相对该父元素移动。
演示如下:
HTML代码与上面相同
css代码如下
#box-set{background-color: #eee;position:relative;height:200px;
}#box{background:lightgreen;height:80px;line-height: 80px;width: 80px;text-align: center;color:#fff;border-radius: 10px;position: absolute;
}.box-1{top:6%;left:2%;}
.box-2{right:-20px;}
.box-3{bottom:-10px; right:20px;
}
.box-4{bottom:0;
}
结果如下图IMG_2:
position fixed
固定定位于绝对定位类似,但是他是相对于浏览器窗口,并且不会碎滚动条进行滚动。
演示:
HTML代码同上
CSS代码如下:
#box-set{background-color: #eee;position:relative;height:200px;
}#box{background:lightgreen;height:80px;line-height: 80px;width: 80px;text-align: center;color:#fff;border-radius: 10px;position: absolute;
}.box-1{top:6%;left:2%;}
.box-2{right:-20px;}
.box-3{bottom:-10px; right:20px;
}
.box-4{bottom:0;
}
效果:
可以看出元素是相对浏览器窗口进行移动的。
fixed的常见的用途是在页面上创建一个固定的头部或者脚步或者固定在页面上的一个侧面。
示例:
<footer>Fixed Footer</footer>
footer{bottom:0;left:0;position:fixed;right:0;height:70px;line-height: 70px;text-align: center;background-color: lightgreen;
}
效果:
转载于:https://www.cnblogs.com/MandyCheng/p/8196481.html
CSS定位属性(position)相关推荐
- css里面的位置属性,CSS定位属性Position详解
4. position:relative + position:absolute 如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位.如果给 ...
- CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
- css怎么使元素绝对定位有过度效果_CSS定位属性Position实例分析
CSS所提供的Position定位属性在进行网页页面布局过程中非常重要,通过使用Position定位属性可以实现对页面元素进行精确定位,最终达到较好的设计及页面展示效果.本文主要针对Position属 ...
- html相对位置置顶,css定位(position)属性怎么用?
在CSS中,定位(position)属性用于规定元素的定位类型,定义建立元素布局所用的定位机制.下面给大家介绍一下position属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- CSS的定位属性Position解析
目录 position(定位) static静态定位 relative相对定位 fixed固定定位 absolute绝对定位 sticky粘性定位 z-index属性 position(定位) pos ...
- css定位属性详解(position属性)
一.定位属性 1.定位属性 属性:position 取值: 1.static ...
- html定位的所有属性,HTML CSS定位属性详解 嘿嘿嘿
定位属性:Position 作用:检索或者设置元素的定位方式"(改变元素位置) 定位的步骤: 1.给元素添加position属性 证明该元素要做位置变 2.确定参照物!(通过position ...
- CSS定位(position))之sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
- CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
最新文章
- 【Spark】Spark2.x版的新特性
- 安全隐患:神经网络可以隐藏恶意软件
- android程序db文件用什么编辑器,在 Android Studio 上调试数据库 ( SQLite )
- java多线程实现电梯_面对对象第二单元总结 - 电梯(java多线程)
- Microsoft SQL Server学习(二)
- 计算机网络解释概念,2017年计算机三级网络技术基本概念与名词解释:计算机网络的基本概念...
- 【转】移动前端工作的那些事---UE/UI架构原型搭建和前端设计之UE架构原型搭建...
- 大话西游之仙侣履奇缘——[超经典台词]
- Q新闻丨吃鸡外挂被开源;Dubbo 3.0来了;工信部约谈百度、支付宝、今日头条;内地iCloud服务将转由云上贵州运营...
- 今日BIM—中交一公院发布道路专用BIM设计软件
- Flink流计算编程--watermark(水位线)简介
- 有哪些在家健身的软件?Mac健身软件推荐
- 爬虫的初步进阶||正则表达式+BeautifulSoup处理特殊标签实现多级网页跳转的信息爬取
- 生物岛实验室(省属)招聘电子工程师
- 事半功倍追求卓越:人生找位的“TONS法则”
- jsjquery获取url域名及参数的方法
- java中快速排序的优化
- 电脑杀毒软件推荐之火绒安全
- 嫦娥奔月-第13届蓝桥杯Scratch选拔赛真题精选
- 1行Python代码实现:PDF转Word。