CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时,就算元素被偏移了,但是他仍然占据着它没偏移前的空间, 绝对定位:position:absolute, 被设置了绝对定位的元素,在文档流中是不占据空间的,如果某元素设置了绝对定位,那么它在文档流中的位置会被删除.
2.父容器使用相对定位,子元素使用绝对定位后,这样的位置不再于浏览器左上角,而是相对于父容器左上角
3.相对定位和绝对定位需要top,right,bottom。Left使用来定制具体位置,这四个属性只有在该元素使用定位后才会生效,其他情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下。或及时使用左,又使用右。
CSS中的相对定位和绝对定位的更多相关文章
- css中的相对定位与绝对定位
之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- css 中的相对定位和绝对定位
1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...
- css中的相对定位与绝对定位的区别
1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- CSS网页中的相对定位与绝对定位
在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...
- div中的相对定位与绝对定位
1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素“相对于”它的原始起点进行移动.(再一点,相对定位时,无论是否 ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- 遮罩层中的相对定位与绝对定位(Ajax)
前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...
随机推荐
- SharePoint 2013 开发——其他社交功能
博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分.社交功能是SharePoi ...
- Data storage on the batch layer
4.1 Storage requirements for the master dataset To determine the requirements for data storage, you ...
- (转)iOS图片拉伸技巧
( 原文博客地址: http://blog.csdn.net/q199109106q/article/details/8615661) 纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要 ...
- 你会用Python做出装逼的东西吗
如果我回答:“用Python很牛逼,但不能做出装逼的东西”,那大家来学习“小白的Python入门教程 ”,还有多少意义? 所以,为了让装逼的小船升级为牛逼的巨轮,让大家学完“小白的Python入门教程 ...
- 闭包的理解-from my own opinion
闭包,说起来那么难,其实理解了作用域,那么理解闭包就容易多了. 全局环境,局部环境,这两个概念很好理解了.那么要深入理解下函数的局部环境. 函数的局部环境,也就是说在一个函数内定义的变量,这个变量只能 ...
- 深入学习golang(1)—数组与切片
数据(array)与切片(slice) 数组声明: ArrayType = "[" ArrayLength "]" ElementType . 例如: va ...
- IOS网络开发(二)
1 局域网群聊软件 1.1 问题 UDP协议将独立的数据包从一台计算机传输到另外一台计算机,但是并不保证接受方能够接收到该数据包,也不保证接收方所接收到的数据和发送方所发送的数据在内容和顺序上是完全一 ...
- Java-->Gson序列化及反序列化
--> 首先导入jar包,并添加到Build Path --> 需要User类:有属性.构造方法和setter.getter方法. --> Test 测试类: package com ...
- 新冲刺Sprint3(第三天)
一.Sprint会议 更新商品价格.商品描述功能已经完成了,搜索商品功能也正在准备了. 以下是部分功能真机测试下的效果图: 二.Sprint周期 看板: 燃尽图:
- bootstrap-13
bootstrap框架中制作导航条主要通过“.nav”样式.默认的.nav样式不提供默认的导航方式,必须附加另外一个样式才会有效,比如.nav-tabs,.nav-pill之类. 导航(标签型导航): ...