css备忘录(关于relative、absolute)

父级用:position: relative;

子级才能用:position: absolute;

relative里面用margin调位置;

absolute里面用top、left、right、bottom调位置。

				
时间: 2024-10-05 22:36:50

css备忘录(关于relative、absolute)的相关文章

CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"> here are some test words </div> <div id="button">点击显示</div> 假设使用position:absolute和top-9999px控制点隐藏 .holi{ width: 200px; heigh

CSS position relative absolute fixed

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的

10步掌握CSS布局定位: position static relative absolute float

无意中看到此文,因作者强调其中避开了浏览器bug/分歧,所以个人认为值得借鉴. 不才仔细看了此文,自觉受益匪浅 ,屡试不爽,佩服作者对css布局的精炼总结,顺便小译了一段, 英文水平有限,且个人通常写写php,对css了解不深却有点兴趣,错误之处还请指正. 个人没有空间,代码中的css文件和js保留了完整路径:http://www.barelyfitz.com/screencast/html-training/css/positioning/ 原文地址:http://www.barelyfitz

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

CSS 中 Position relative 和 absolute区别

Relative Positioning A relative positioned element is positioned relative to its normal position. The reserved space for the element is still preserved in the normal flow. relative 位置是相对元素的父元素的位置.left, top 是相对其父元素进行调整, 但是位置还是和DOM中的看起来一致(in normal flo

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层

css深入理解relative

第一讲     relative和absolute相煎关系 同源性 .position:relative .position:absolute 限制作用 1.限制left/top/right/bottom定位 2.限制z-index层级 3.限制在overflow下嚣张气焰 1.限制定位,如果没有relative限制,元素定位absolute会可以在任何地方定位 2.限制层级 z-index 层级越高 3.限制超越overflow relative与fixed 同源性 .position:rel

/*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/

1 <!DOCTYPE html> 2 /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .touch:hover .content{ 9 vi

CSS中&quot;position:relative&quot;属性与文档流的关系

前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流 说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站