【div定位relative和absolute和float测试3】的更多相关文章

div定位relative和absolute和float测试3

position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了下,divall(背景图)这个包裹了六个小div(背景色),并把小div在divall里依次排列,间隔是10px.定位相关的div写在了行内样式,其他的与测试不太相关的写在了前面的style里. 父div设置了上边距和左边距,距离浏览器留了30px边距.设置里面的第一排小div绝对定位,top都是1…

div定位relative和absolute测试1

div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设置两种定位方式,都是top值10px.测试结果:蓝色div(relative):18px,相对于body向下的了10px,body自身带着上margin是8px,所以相对于浏览器上方是10+8px.相对位置受外面的内容的margin的影响.红色div(absolute):10px,相对于浏览器向下了…

div定位relative和absolute测试2

之前的博文:div定位relative和absolute测试1.中,body包含了蓝色和红色div,蓝色的相对定位,相对于body向下偏移了10px位置,红色绝对定位,相对浏览器偏移了10px位置. 相对定位,不论是不是包含关系,都会受外部容器的影响.绝对定位,只和浏览器有关 ,和其他没有影响. 如本文的测试中,红色div是相对浏览器定位,不受其他div影响.绿色的是包裹了蓝色和红色的div,它有30px的margin-top,加上前面的黄色div的高度100px,绿色div距离浏览器顶部是13…

relative、absolute和float

relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.…

[转]relative、absolute和float

position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.bottom值是相对于自己在z-index层的位置.…

CSS+DIV定位分析(relative,absolute,static,fixed)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 1.官方定义 先看下各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative:生成相对定位的元素,通过top,bottom,left,right的设…

CSS 定位 relative && absolute 问题？

1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多出来的 top , left 属性负值呀? (已测试了所有最新的浏览器,自动添加的top , left 属性负值) demo: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <…

css absolute和float，relative，z-index的同异

大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录: float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute(层级高)其实已经不能算是欺骗父元素了,而是出现了层级关系. 一旦给元素加上absolute或float就相当于给元素加上了display:bloc…

div和span、relative和absolute、display和visibility的区别

一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式. 二.relative和absolute的区别 relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,…

页面布局排版-block，inline，float，relative，absolute等

1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔(其实实质是同第一点) 块元素是指另起一行开始渲染的元素,行内元素是指不需另起一行渲染的元素 示例代码: <div style="background-color: wheat;">我是不带任何样式的的div,我是块级元素,块级元素独占一行</div> <sp…

relative 和 absolute 定位关系

问题: relative 和 absolute 之间的关系是什么?有什么区别? 那,答案呢? relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置relative 属性前的位置与空间,其中背景图和图片其他内容显示在页面最上层,占用自己原本位置空间,不挤占其他html快的空间 absolute  绝对定位,一直往上级找relative属性,不找同级,找到含有relative的标签进行定位,没找到相对body定位,释放原本占用的位置空间,从侧面看,相当于…

display值的作用分别是什么？relative和absolute分别是相对谁定位的？

display值的作用分别是什么? none:元素隐藏,不占据位置 block:该元素显示为块级元素 inline:默认,该元素会被显示为内联元素 inline-block:行内块元素 list-item:该元素会作为列表显示 run-in:该元素会根据上下文作为块级元素或内联元素显示 table:该元素会作为块级表格来显示 inline-table:该元素会作为内敛表格来显示 table-row:该元素会作为一个表格行来显示 table-row-group.table-header-group…

ie10兼容问题 -- 将div定位absolute在图片img上面，导致div点击事件无效

ie10兼容问题: 将div定位absolute在图片img上面,发现div若不加背景色,导致div点击事件(任何事件)无效. <div class="paper-box"> <div class="red-paper"> <img class="company-uk-packet" src="./images/uk-bag.png" alt=""> </div&g…

前端~定位属性position（relative、absolute、fixed）的分析

前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物) absolute: 随参照物的变化而变化 fixed:固定 2,position 是否会被内部的子元素继承? 会,一般不能继承的属性,像盒模型,border.margin.padding等 注意事项:当使用了滚动组件(例如better-scroll)时,跟better…

absolute 和float

position:absolute与float:left是近亲 包裹性 包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签.例如平时我们要让span标签支持width属性,可能要设置: span { display:block; width:100px; } 但…

关于relative和absolute的总结

对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因吗!!!=_=!!还是先记基础知识好了,因为里面还是有很多坑!!相对定位: 内联元素加相对定位也不支持宽高!! relative并不会使元素脱离正常文档流! 以上两点说明加上相对定位不影响元素本身的特性,内联元素和块元素依旧保持原来本身的特性!就是说原来是内联加上relative以后还是内联啦! 如…

html中div定位练习

html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定,$http请求等等,记录备忘: login.css中代码: /* 主页面数据列表 */ .planWrite{ background-color: #868383; margin: 9px; font-size: 16px; width: 93%; height:330px; } .plDiv{ w…

div定位

1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <style> body{ margin:0px 1px 2px 3px; } #father{ background-color:#FFFF99; width:100%; height:100px; border:1px dashed green; } #son1{ float:left; } #son2{ f…

position 属性值：relative 与 absolute 区别

absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float 可以 inline-block 化元素 float 的破坏性:使高度塌陷 absolute 的破坏性:使高度和宽度都塌陷 absolute属性的 破坏性:高宽占据空间为0的特性, 定位性:借助left/top等属性的定位 少用absolute,常见absolute布局的替代实现方案: 使用marg…

relative和absolute

relative 相对定位 1. 幻影瞬移 absolute属性也有瞬移技能,不同之处在于:absolute属性以天空或其他外界限制计算瞬移位置:而relative属性由于是凡人肉体,偏移能力有限,只能通过自身所在位置计算瞬移位置. 且relative属性的这种瞬间移动之际实际上是一种障眼法,其真身依旧在原来的位置上,您所看到了其身体的移动不过是幻影而已.因此,relative属性的这种技能被世人称为“幻影瞬移”. relative left/right top/bottom relative的…

知识点摸清 - - position属性值之relative与absolute

两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己在z-index:0层的位置. 2.position:absolute 完全脱离文档流,不保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己最近的定义为abso…

css案例学习之relative与absolute

代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>absolute属性</tit…

position relative和absolute区别

看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html 总的来说 这两个属性都是通过增加left和right偏离原来的位置  但是relative仍然保留了原先位置的占位  但是absolute没有 原先位置不占位其他元素会补上 最主要的区别 看原文这句话 对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层.如果其父层中都未定义absolute或rel…

浅析position:relative position:absolute

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom…

css的relative与absolute（一）

relative与absolute是position的两个值,本文对这两个值得关系进行了一个小实验 实验一: 首先定义了两个div元素,代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&…

[转]Html position（static、relative、absolute、fixed）

转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性.<div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">s…

【学习笔记】HTML position(static、fixed、relative、absolute)

[本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id> </div>1. relative relative属性相对比较简单,我们要搞清它是相对哪个对象…

学习总结relative和absolute

之前对于absolute和relative不了解,现在整理 先设置relative再设置absolute 因为父不设置relative 那么子会向上寻找祖先元素,看是否设置relative.如果有则相对于设置的relative来定位,如果没有,那么就相对于body窗口来定位.因此,只要设置absolute一般都是相对父亲来定位 relative 是父 absolute 是子…

position：absolute、float、display：inline-block 区别

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行.图片的文字环绕布局效果就是float. inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果. 作者:Ivony链接:ht…

position:absolute和float会隐式的改变display类型

position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效. float在IE6下的双倍边距bug就是利用添加display:inline来解决的 注意一点的是,position:…