css定位position引发的层级关系问题详解

来源:脚本之家  责任编辑:小易  

重叠在一起需要改变默认的布局方式,将其中一个显示在上层需要设置深度顺序,这两点分别用如下样式完成 position: absolute; /*设置为绝对定位*/z-index:999; /*设置重叠的上下次序,值越大月在上方*/示例如下 创建Html元素 我是绝对定位,并且

position定位里的absolute,relative和fixed

    absolue:绝对定位,用top,bottom,left和right根据有定位的父级元素进行定位,如果无则相对body元素即整个页面文档进行定位。 relative:相对定位,相对自己原来的位置进行定位 fixed:绝对定位,相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置,不会随着滚动条滚动而变化)

因为父元素div设置了margin为8,修改为: div{ margin:0; } fixed:表示固定定位,相对移动的坐标是视图(屏幕内的网页窗口)本身。 由于视图本身是固定的,不会随浏览器窗口的滚动条滚动而变化,除非在屏幕中移动浏览器窗口的屏幕位置,或改变

由position引起的层级关系问题

因为加了这个属性之后,元素li就变成了绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。因此,四个li都定位到了左上角,就产生了重叠的现象。 请注意,在CSS代码中,定位将覆盖:float:left; 并使其无效。 【position:absolute

首先我们要知道,css属性其实是一个立体空间有x,y,z轴,但是只有我们使用了position定位时,z轴上的层级关系才体现出来,即z-index这个属性仅定位元素才有。现在让我们来分析这些层级关系吧。

如果是相对定位(relative),那么它的位置是保留的; 如果是绝对定位(absolute)或固定定位(fixed),则它的位置是不保留的。

层级关系如下: z-index这个属性仅定位元素才有 有定位属性的元素默认层级是0,如果层级一样,则后面的元素居上,可以理解z-index:0+ absolute定位的元素会让下面元素y轴向上移动,可以理解为absolute定位后该元素变成行级元素了 z-index的值越大,离我们观察者越近,比如z-index:2在z-index:1 的上层

position主要有4个值fixed ,absolute ,relative ,static fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 absolute 生成绝对定位的元素,相对于 static 定位以外

只有兄弟关系的定位元素才能比较层级

男人味儿十足,尤其在红高粱里和周迅搭戏,男性荷尔蒙简直都要穿透屏幕了。大尺度的拍摄将他的霸道展现的淋漓尽致其实之前对于朱亚文了解不多,只是看过他演的闯关东和远去的飞鹰,印象就是一个走正剧路线的演技还不错的青年演员,因为演了挺多军人之类的角色,就感觉他性格也是比较硬汉之类的看了几集红高粱之后,去围观了下他的围脖,觉得好没有意思,都不怎么发围脖,发围脖不是宣传电视剧,就是参加微访谈,都没有什么生活类的。。。就更觉得应该是个很一本正经但是又无趣的演员,可以好好演戏,但是性格当不了明星本来都没想继续关注这个人了,就安安静静看他剧里角色就好,结果今天刷围脖的时候,刷出了一篇他这两天宣传红高粱的时候,接受

下面让我们来分析上面列出的几点:

谢邀!一般来说,一个男人想跟一个女人生孩子,说明他是打算跟这个女人好下去的。但也不排除这个男人并不懂得生过孩子,生活带来的改变。他会不会因此负责任地对待女人以及孩子,也不能仅仅凭借想跟你生孩子这一主观意愿来判断。或者,他只想跟你生,却还没确定跟你结婚呢?一个男人爱不爱你,你应该在相处过程中去感受,从细节中感受,从吵架生气时感受,从病痛困难中感受,从对待你的亲人朋友的表现中感受……相信你心里会有一杆秤。

分析一下第一点

不喜欢用绿茶婊这种词描述一个女人,不管她是谁。郝思嘉也没有公主病,她虽然有时候会利用男人,但并不是一个娇滴滴地指望男人永远宠爱自己、帮自己搞定一切的人,如果一定要用一句话形容她,我想说,她是一个充满征服欲的人。这种征服欲首先体现在爱情上。几乎全佐治亚州的男孩子都喜欢她,她却一心想要得到卫希礼,无他,就因为她不了解他,他不像别的男孩子那样,热衷于对她献殷勤。她简直无法相信会有人不爱她,这种征服欲,使得她千方百计,一定要和他在一起。为了这个目的,她愿意付出任何代价,比如嫁给她并不喜欢的查理,只是想刺激卫希礼一下。她为他做了很多事,看上去极其痴情,但有一个细节,证明她对卫希礼一无所知。有次她偷看卫希

<style> .c1{ width: 100px; height: 100px; background-color: rgb(255, 0, 0); } .c2{ width: 200px; height: 100px; background-color: rgb(0, 0, 255);; position: absolute; top: 50px; } </style> <body> <div class="c1">c1</div> <div class="c2">&nbsp&nbsp&nbsp&nbspc2</div> </body>

《金星秀》停播,引来网上热议,网友纷纷猜测其中的原因。猜想一太过毒舌得罪人太多?可能金星太过于心直口快,本身是一档了解明星,关于娱乐圈热点问题的节目,被金星搞成了批判大会,谁有点黑点来《金星秀》都会瑟瑟发抖。猜想二:表达情绪化太过随性?舞蹈演员出身,很早就出国学习,经历过性别转变、跨国婚姻,最后成了三个孩子的妈妈,金星的人生经历够普通人活两辈子,所以这让她有东西可以聊。她虽然“毒蛇”,但是心眼并不坏,对娱乐圈明星们的批判,立场像长辈教育年轻人。比如房祖名涉毒被抓,金星说:“作为父亲,成龙非常失职”,同时调侃:“爸爸去哪儿啦,都去局子里捞孩子。”虽然底色是温暖的,可是遇见喜欢的人使劲夸,不喜欢的

此时c2的层级更高,应该在叠在c1上方

分析一下第二点

<style type="text/css"> .c1{ width: 100px; height: 100px; background-color: rgb(255, 0, 0); position: relative; } .c2{ width: 200px; height: 100px; backgr

此时定位元素都有层级,后面的元素在上面

分析一下第三点

<style type="text/css"> .c1{ width: 100px; height: 100px; background-color: rgb(255, 0, 0); position: relative;

此时c3会直接覆盖c2,因为c2的定位是absolute,下面的元素会往c2处移动,由第二点可知,c3在c2的上面,故c3直接盖住了c2

分析一下第四点

<style type="text/css"> .c1{ width: 100px; height: 100px; background-color: rgb(255, 0, 0); position: relative;

c1和c2都是定位元素,默认z-index:0,将c1的z-index设置为1,这样c1会在c2的上面

分析一下第五点

<style type="text/css"> .c1{ width: 100px; height: 100px; background-color: rgb(255, 0, 0); position: relative; } .c2{ width: 200px; height: 100px; background-color: rgb(0, 0, 255);; position: absolute; z-index: 1; } </style> <body> <div class="c2"> &nbsp&nbsp&nbsp&nbspc2 <div class="c1">c1</div> </div> </body>

把c1放在c2里面,即使把c2的z-index设为1,c1依旧在c2上面,说明嵌套元素无层级关系,只有兄弟元素才有层级关系

 

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

CSS关于层级关系的问题。。。

<div class="banner">

<object type="application/x-shockwave-flash" data="flash/930100.swf" width="930" height="100">

<param name="allowscriptaccess" value="always">

<!-- 解决 IE 6 7 8 层叠问题 -->

<param name="wmode" value="transparent">

<param name="movie" value="flash/930100.swf" width="930" height="100">

<embed src="flash/930100.swf" width="930" height="100" border="0" align="center" allowscriptaccess="always" wmode="transparent">

</object>

</div>

css中的绝对定位 position: absolute;和z-index 等级区分问题

使用 absolute

如两个绝对定位对象的 z-index 属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠.

z-index 为无单位的整数值,可为负数.按照数值的大小排列,数值越大,越在外层.

不使用 position 那么其中的 left,right,top,bottom 定位信息对其无效,z-index 也不会发挥作用因为没有层叠的情况出现

css代码中position的定位relative absolute static不知道怎么用,搞不懂到底什么意思,到底会有什么效果

用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。

Position属性有四个值:static、fixed、absolute和relative,

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

以前我一直没有仔细去研究它,到具体应用时有时会有点迷糊,我相信很多朋友也会有这样的问题。今天我特意测试了一下,得出了以下结论:

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

CSS清除定位position

position: static;

添加到子元素CSS样式中清除定位

css中的position的定位问题

static 静态定位,或者说不定位,元素的位置由文档流来决定,这是默认值;

absolute 绝对定位,就是在整个文档区域指定一个坐标(注意是整个文档的大小,不是窗口的大小,文档大小是可以超出窗体大小的),然后元素就被定位到这个位置上。就好比在地球上指定东经xxx度,北纬yyy度,我们就可以得知这个地方在哪;

relative 相对定位,就是根据元素当前所在位置(或者说定位前的位置)来决定元素定位后的位置。就好比在地球上说“往东100米,往南50米”,就是根据你当前所在的位置来说的;

fixed 固定定位,这个和absolute类似,但它是以浏览器窗口的可见范围为定位基准的,这样的话,当用鼠标滚轮卷动页面(或者点击滚动条)时,用fixed定位的元素是会保持位置不变,不会随页面滚动的(而absolute定位的元素则会随着页面内容滚动)。

注:你可以自己写代码进行测试的。要善于利用浏览器的开发者模式(按F12)。

  • 本文相关:
  • 详解css粘性定位position:sticky问题采坑
  • css position属性和实例应用演示
  • css position定位属性_动力节点java学院整理
  • css的position定位和float浮动详解
  • css关于position属性的用法详解(绝对定位和相对定位的混淆)
  • css position 设置元素的定位方式详解
  • css 定位之position全面了解
  • 总结css的position定位属性在使用的一些重点
  • 图解css中position属性的定位用法
  • 深究css定位position的常用技法
  • CSS关于层级关系的问题。。。
  • css中的绝对定位 position: absolute;和z-index 等...
  • css代码中position的定位relative absolute static...
  • CSS清除定位position
  • css中的position的定位问题
  • css 固定定位造成两个DIV重叠,如何清理?
  • css布局时,为什么fixed定位元素设置width:100%会...
  • css 为什么我给li加了position:absolute 他们重叠...
  • cssdiv用position定位后会不会影响后面元素的定位...
  • position css 相对定位
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved