【HTML+CSS】浅谈:相对定位与绝对定位
相对定位和绝对定位
·定位标签:position
·包括属性:relative(相对) absolute(绝对)
1.position:relative; 假设对一个元素进行相对定位。首先它将出如今它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点。相对定位时。不管是否进行移动,元素仍然占领原来的空间。
因此。移动元素会导致它覆盖其它框)
2.position:absolute; 表示绝对定位。位置将根据浏览器左上角開始计算。 绝对定位使元素脱离文档流。因此不占领空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(由于绝对定位的框与文档流无关,所以它们能够覆盖页面上的其它元素并能够通过z-index来控制它层级次序。
z-index的值越高,它显示的越在上层。
)
3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗体左上角
4.相对定位和绝对定位须要配合top、right、bottom、left使用来定位详细位置,这四个属性仅仅有在该元素使用定位后才生效,其他情况下无效。
另外这四个属性同一时候仅仅能使用相邻的两个。不能即使用上又使用下。或即使用左,又使用右。
----------------------------------------------------------------------------------
希望大家多支持,有大家的支持,我才干走得更远,谢谢。
------------------------------------------------------------------------------
联系方式,新浪微博:http://weibo.com/Neveryu
很多其它学习资源请私信我的新浪微博...
推荐微博:彻底被毕业的婷婷
快捷入口:王婷婷 ;
【HTML+CSS】浅谈:相对定位与绝对定位的更多相关文章
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...
- css中的相对定位与绝对定位
之前说过了CSS有三种基本的布局机制:普通流.浮动和绝对定位.除非专门指定,否则所有的框都在普通流中定位.而普通流中元素框的位置由元素在HTML中的位置决定. 相对定位 相对定位实际上被看做普通流定位 ...
- 浅谈块元素绝对定位的margin属性
对于div的绝对定位一直以为margin属性是无效的,只是通过top,left,bottom,right定位,然而今天的却发现不是这样的,于是对其做了些实验: 使用的HTML原始测试文件: <! ...
- CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)
相对定位:position:relative; 不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级. 绝对定位:position:a ...
- css 中的相对定位和绝对定位
1.默认不写position的话,值为static. 2.相对定位:相对于元素自己本身的位置偏移,虽然位置偏移,但元素本身占据的空间并不释放. 3.绝对定位:相对于离它最近的,position不为st ...
- css中的相对定位与绝对定位的区别
1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
- css浅谈
一 CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- div 的相对定位与绝对定位
网 上也有不少使用div + css进行布局的教程,却存在很多缺陷,一是对css的布局模型讲解不清楚,让人很难理解相对定位.浮动等概念:二是虽然避免了“表格套表格”的缺点,却 带来了“div 套 di ...
随机推荐
- Udp实现简单的聊天程序
在<UDP通讯协议>这篇文章中,简单的说明了Udp协议特征及如何Udp协议传输数据 这里将用Udp协议技术,编写一个简单的聊天程序: //发送端: package com.shindo.j ...
- SQLLoader5(从多个数据文件导入到同一张表)
从多个数据文件导入到同一张表很简单,只需要在INFILE参数指定多个数据文件的路径即可.数据文件1:test1.txt1111 ALLE SALESMAN2222 WARD SALESMAN数据文件2 ...
- 为什么报错说req未定义,createServer只接受匿名函数吗?
var http = require('http');var server = new http.createServer(handlerRequest(req,res));server.listen ...
- css中的伪类
伪类用于向某些选择器添加一些特殊效果. 1):focus 伪类在元素获得焦点的时向元素添加特殊样式.一般用于输入文本域,按钮,以及超链接. a:focus{color:red;}超链接字体为红色 in ...
- Could not load file or assembly 'Oracle.DataAccess' or one of its dependencies. An attempt was made to load a program with an incorrect format.
I have installed a Web application on IIS 7.0 windows server 2008 R2 64 bit OS I am refering a oracl ...
- XML 解析中,如何排除控制字符
XML 解析中,如何排除控制字符 今天在解析一个中文的 XML时,始终报错 PCDATA invalid Char value 21 in Entity ,查询了一下这个 21 的ascii 值,发现 ...
- 【转】研华Adam6060某段时间后无法连接的问题
配合乙方测试,需连接现场Adam模块.一段时间后发现模块无法连接,网上资料甚少,发现此贴,记录下.以前没有多客户端高频次(其实谈不上高)连接,没有考虑连接释放的问题.另外,官方Demo也没有释放连接. ...
- javaScript给元素添加多个class
<html> <head> <style type="text/css"> .div2{ font-size:16px; color:orang ...
- 最强烈推荐-我的java收藏夹(内有国内最好的java论坛)
原地址: http://bbs.chinaitlab.com/dispbbs.asp?boardid=148&id=34276 国内: www.chinajavaworld.com-论坛人很多 ...
- CAN总线
1.CAN(controller area network) LAN(local area network)局域网 2.CAN等通信协议的开发,使多种LAN通过网关进行数据交换得以实现.如应用在汽车电 ...