网页元素定位

1.注意点:

1)给元素设定高度要小心,除非给已知大小的图片设置高度,否则无法得知指定元素在页面上会有多高。此时最好通过padding等来控制高度。

2)对于同一个元素,不要讲float属性和(absolute,fixed)定位方式结合使用,但是和(static,relative)一起使用,(圣杯布局貌似就有将float与position:relative相结合的例子)

2.css提供了四种类型的定位:

1)静态定位static:这是浏览器默认的定位方式,按照简单的从上到下的顺序排列页面流。

2)绝对定位absolute:使得页面元素脱离页面流,并将它置于网页的上层,有时候会遮挡住其他的内容。如果一个标签的位置是绝对的,并且它又不在任何设定了absolute,relative,fixed定位的元素里面,那么它就是相对于浏览器的窗口进行定位。如果一个标签处在设定了absolute,relative,fixed定位的标签里面,那它就是相对于该外围元素的边沿进行定位。

3)相对定位relative:让元素相对于它在网页的默认位置定位,并在元素未进行相对定位之前所处的位置上留下一个窟窿。因此,相对定位的好处并不在于移动元素(这个靠绝对定位来实现),而是给它内部的元素设定一个新的参考点,此时相对定位的含义是“相对于我”定位,即设置了relative属性的外围元素,获取了一个绝对定位,该元素里面要定位的元素则获得了针对于该元素边沿的相对定位。

4)固定定位fixed:锁定在屏幕的某个位置,始终相对于body进行定位,与background-attachment:fixed类似。用户滚动元素时,固定元素会在页面上保持不变。

备注:

1)上述定位中,设置position:relative和position:absolute(前提!)都可以使元素激活left,top,right,bottom和z-index属性(网页虽然是二维的,其实有z轴,大小由z-index来控制),默认情况下,所有元素都在z-index=0这一层,这就是文档流,设置position:relative和position:absolute都会让元素浮起来,就是说z-index>0。不同的是,position:relavtive会保留自己在z:index=0层的占位,虽然对其他z:index=0层元素没有影响;而position:ablolute则会完全脱离文档流,不会在z-index:0层保留占位,其他元素就会占据这个元素本来的位置,造成重叠的效果。

2)float也会改变文档流,不同的是,float属性不会让元素上浮到另一个z-index层,仍然会让元素在z-index=0层排列,其他元素就会环绕该元素而存在。也因为这个原因,float不能和任何一种定位方法结合使用。

3)综上可知,对于position:absolute元素,完全脱离原来层,其在原来层实际占据高度和宽度都是0;对于position:relative元素,依旧占据原来的高度和宽度,如果设置top,left不为0就会形成窟窿。对于浮动元素,在原来层实际占据的高度为0,宽度依旧保留(这就是造成浮动元素凸出的原因,需要为其父元素设置overflow:hidden来撑高其父元素)。对于以上这几种元素,其自身的高度和宽度由其中的内部元素撑开,或者宽度由人来设置。

3,元素堆叠

z-index :-1;值越大,就会出现在越接近顶层的位置,此外,还可以使用负数(IE7之前不支持负数)。

关于多个元素堆叠这个问题,除了设置了position为relative或absolute会激活z-index之外,还有一种特殊情况,并未激活z-index,但仍然让元素发生了重叠,这就是:负边距。

给元素设置“z-index”属性,首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。

css元素position定位和z-index的更多相关文章

  1. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  2. Css元素布局定位

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  4. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  5. css中position 定位的兼容性,以及定位的使用及层级的应用

    一.首先我们来看看定位的兼容性,当然是在IE6.7但是现在大多数公司都已经不考虑了 我们就作为一个了解吧: 1.在IE67下,子元素有相对定位的话,父级的overflow:hidden包不住子元素 解 ...

  6. CSS——对position定位和margin-top的理解

    一.常见定位方式 1.positon:absolute (脱离文档流) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位 (这里的父元素是指定位方式为relative和abso ...

  7. CSS使用position定位后导致元素浮动

    1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolut ...

  8. css 之 position定位

    position属性一共有4个值,分别是static.absolute.relative.fixed. static为默认值,指块保持在原本应该在的位置上,即该值没有任何移动的效果. absolute ...

  9. 页面元素定位-CSS元素基本定位

    基本定位 """属性定位 一 """ # #通过id # driver.find_element_by_css_selector(" ...

随机推荐

  1. linux网卡设置详解

    centos7安装之后是需要在网卡配置文件中开始网络连接 onboot =yes 刚开始时网卡获取IP模式是dhcp 你会发现ifconfig不能用,猜测是废弃了,你要yum install net- ...

  2. 【原】Windows下Nexus搭建Maven私服

    一.Maven安装 详见Java开发环境搭建 二.Nexus安装 2.1.下载 地址:http://www.sonatype.org/nexus/go/ 选择OSS(ZIP)版本 2.2.安装 将安装 ...

  3. linux load average

    性能分析_linux服务器CPU_Load Average 理解Linux系统中的load average(图文版) 理解Load Average做好压力测试 top命令的Load average 含 ...

  4. 【转载】wireshark:no interface can be used for capturing in this system with the current configuration

    转自:wireshark:no interface can be used for capturing in this system with the current configuration 通过 ...

  5. 简单实现Redis缓存中的排序功能

    1.在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发 ...

  6. Xamarin学习资源收集

    推荐入门视频 跨行動平台App開發概觀- 使用Xamarin+Visual Studio https://www.youtube.com/watch?v=ELuFTTn1gS4 中文产品介绍http: ...

  7. delphi动态数组指针问题

    就一个button事件 procedure TForm1.btn7Click(Sender: TObject); Type TMyArr = array of array of array of In ...

  8. vbox共享文件 挂载

    环境:主机操作系统是Windows 7,虚拟机是open suse 12.0,虚拟机是VirtualBox 4.2.1. 1. 安装增强功能包(Guest Additions) 安装好open sus ...

  9. C#Form窗体通过代码改变尺寸

    通过Size属性不能得到正确的窗体尺寸, 怎么办? 还需要设置 MaximumSize 属性和你的 size属性尺寸一样. this.FormBorderStyle = FormBorderStyle ...

  10. Ubuntu 更改默认apt-get源

    原文转自:http://zhoushijun.iteye.com/blog/1942475 方法: 1.修改源地址:cp /etc/apt/sources.list /etc/apt/sources. ...