【Relative 定位与Absolute 定位实例】的更多相关文章

Relative 定位与Absolute 定位实例

一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .hv { position:relative; left:100px; top:150px; } .hv2 { position: absolute; le…

fixed定位与absolute定位

相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对后,就具有了偏移属性和堆叠属性Z-index,属性值越大,越靠上 不同点: fixed定位: 设置偏移量后:无论有无已经定位的祖先元素,都相对于浏览器窗口进行偏移 未设置偏移量:以其父元素为基准定位,会继续包含在父包含块中. 表现形式:位置固定,不会随滚动条变化:被他遮盖的元素,可以从其下穿过. a…

position:relative/static/fixed/absolute定位的区别以及使用场景

absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变.absolute的元素不仅位置改变了,同时也脱离了文档流.所以absolute会把非定位盒子覆盖掉. position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子…

CSS 相对|绝对(relative/absolute)定位系列（一）

一.有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑到:1. 琐碎的俗称tip的东西不少,如何寻找主线串联:2. 不少自己“非主流”的破常规的观点,如何一句话提炼,如何清晰表述,如何让人易于理解:3. relative/absolute/z-index本身关系暧昧非比寻常,如何有重点的叙述,同时又不扯断他们之间的牵连:4. 又要拿一些大网站说事,如何…

relative 和 absolute 定位关系

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

CSS 相对/绝对(relative/absolute)定位系列（四）——张鑫旭

前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着不俗身世,但无形中会影响他人的凡人. 二.故事继续 系列一中讲了浮动和绝对定位两位魔鬼兄弟之间的感人故事,那相对定位和绝对定位之间又有怎样的故事呢?//zxx:对微小说没有兴趣的可以直接跳到下一段 话说那个CSS即将开启的时代,浮动和绝对定位的父亲“浮绝大魔王”因为过于强大,有碍和谐,于是其他神界属…

position 的值absolute、fixed、relative和static的定位原点是什么

position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点. fixed(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位. relative 生成相对定位的元素,相对于其元素本身所在正常位置进行定位. static 默认值,没有定位,元素出现…

CSS学习摘要-定位实例

CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用,比如策略战争游戏,比如从移动版的网页,屏幕狭小.空间有限:比如你可能想要放置许多信息的紧凑消息框,不用就会充满整个UI.我们简单的例子完成后就会像下面这样: 注意: 你能看完整的示例,可运行在 info-box.html (source code).检出它以理解你在本文章里要建立什么. 你可能会想:…

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如…

fixed 和 absolute 定位的区别

fixed:固定定位           absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动. 一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等). 在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!! 测试代码,拖动滚动条看差异 <style> body { heig…