CSS3(定位)
来源:互联网 发布:js单选框是否选中 编辑:程序博客网 时间:2024/05/22 14:31
定位(position)
属性:
absolute(绝对定位)
绝对定位脱离从文档流,并且对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位脱离了文档流和文本流,因此不占据空间。普通流中的其他元素的布局就像绝对定位的元素不存在一样。
.box { position: absolute; left: 30px; top:20px;}
如下图:
绝对定位的元素的位置相对最近的以定位的“祖先元素”,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
Tip:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
relative(相对定位)
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后可以通过设置垂直或者水平位置,让这个元素“相对于”它的起点进行移动。
.box { position: relative; left: 30px; top: 20px;}
如下图:
Tip: 在使用相对定位是,无论是否进行移动,元素仍然占据原来的空间。因此移动元素会导致覆盖其他的框。相对定位没有脱离文档流和文本流。
fixed(固定定位)
如果对元素进行固定定位,则元素固定在屏幕的相应的位置,不会随滚动条的改变而改变。
阅读全文
0 0
- CSS3(定位)
- css3 设置背景定位
- css3-定位和浮动
- css3 居中定位方法
- css3中position定位详解
- css3盒子模型及其定位
- css3图片背景定位全屏
- CSS3之背景定位原点background-origin
- CSS3动画-定位元素层级覆盖问题
- 16-CSS3重点定位和display
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
- 8.HTML5 CSS3大小、定位、轮廓相关属性
- CSS3的变换对定位参照的影响
- HTML5 CSS3能让我们可快速更方便的定位
- 利用css3 transform优雅实现元素定位在屏幕正中央
- css3 居中对齐,position: absolute 垂直居中定位
- CSS3多重背景及背景图片裁剪、定位和尺寸
- css3 让绝对定位元素水平居中的方法
- 网球线的几个常见问题
- 关于AOP记录日志的做法
- 第11期 《精品选择》2017年6月刊
- 汉诺塔问题。
- 正则表达式:Pattern类与Matcher类详解
- CSS3(定位)
- 01背包问题 hdu2602 Bone Collector
- 《Tomcat内核设计剖析》勘误表
- zip压缩和解压的方法 实测
- Linux下gulp报错Error:watch ENOSPC的解决方法
- mac 系统中Android studio的一些快捷键
- Window 下替换 Android Studio 的终端 terminal
- 逆向修改手机内核绕过反调试
- android从应用到驱动之—camera(1)---程序调用流程