CSS__ Relative, absolute,

同时又left, right  或者 top, bottom时

relative, 尽量少用,会出现层级覆盖, 或者单独使用, 避免层级嵌套, 或者覆盖

absolute具有包裹性, 和破坏性

包裹性

破坏性: 父级高度清空,变小

时间: 2025-01-01 11:41:31

CSS__ Relative, absolute,的相关文章

[转载]position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

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

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

css position: relative,absolute详解

关于CSS中 position在布局中非常重要,查了很多资料都说的很难理解,下面说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素. absolute: 对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折

css定位relative,absolute

转自http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1.先解释一下文档流 就是HTML的一种机制,块元素单独占一行(比如   div),内联元素不换行(a标签,img标签): 2.几种定位方式 2.1   static HTML默认定位方法,服从文档流(flow),自适应的,不需要我们设置. 2.2 relative 相对定位,相对于自己原来的位置(参照物是自己),可以使用bottom,top,left,righ

CSS中position属性的理解,相对位置relative,绝对位置absolute,固定fixed,页脚固定的实现2种方法

页脚固定的底部的两种方式: 1.使用fixed属性值 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div style="height: 1500px;width: 100%;background-color: green;margin-bottom: 320px;"> 8 9 <

html中相对(relative),绝对(absolute)位置以及float的学习和使用案例 (转)

这几天着手于CSS的研究,研究的原因主要是工作需要,最近发现如果做前端仅仅会javascript很难尽善尽美,当然懂样式和html在一定程度上可以让我们更近一步. css较为简单,由于个人擅长编写代码,所以很少研究,偶然发现如果会做界面给自己带来的巨大好处,我开始了CSS的学习.css三大选择器:id选择器,class选择器元素选择器,美工一般只用class选择器.所以我这里也只采用class选择器.(备注:id一般用于编程人员书写脚本,在编程过程中尽量减少在代码通过class获取元素对象,相应

absolute、relative,toggle()

测试代码如下: <div> <div class="global">不应用样式</div> <div class="global abs">位置为:absolute </div> <div class="global rel">位置为:relative</div> </div> 这两者的区别: 1. absolute不占位置,relative是占位置的

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元