css position

简介: 2015年5月1日 19:19:33 星期五 1,  position:relative top: 10px left: 10px 该元素相对于自身原有的位置偏离 {10, 10} 2, 如果父级元素用 position:relative 子级元素用 position:absolute...

2015年5月1日 19:19:33 星期五

1, 

position:relative

top: 10px

left: 10px

该元素相对于自身原有的位置偏离 {10, 10}

2,

如果父级元素用 position:relative 子级元素用 position:absolute

则 子级的 top, letf 是相对于父级元素左上角的偏移值

3,

如果父级元素用 position:relative 且 margin:2px, 且当前光标相对于屏幕左上角坐标是{10, 10}时

则, {event.pageX, event.pageY} = {12, 12}

 

目录
相关文章
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
312 0
|
前端开发 UED 开发者
神秘的 CSS 属性 “position: sticky” 究竟有何魔力?带你彻底理解粘性定位的奇妙世界!
【8月更文挑战第20天】在前端开发中,CSS的粘性定位(`position: sticky`)是一种结合了相对与固定定位优点的强大工具。它使元素能在特定条件下相对定位,达到指定阈值时转为固定定位,非常适合制作“吸顶”导航栏等。例如,设置`position: sticky; top: 0;`能让导航栏滚动至顶部时固定显示。此特性不仅限于导航栏,还可应用于侧边栏等,增强布局灵活性与用户体验。尽管如此,仍需注意不同浏览器间的兼容性和可能的布局冲突。
526 0
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
1134 0
|
前端开发
css display position float 之间的关系
css display position float 之间的关系
113 0
|
前端开发
CSS position 小结
CSS position 小结
109 0
|
前端开发 容器
|
前端开发 容器
【CSS】定位属性position使用详解(static、relative、fixed、absolute)
css定位属性position:static、relative、fixed、absolute详细介绍及使用样例。
332 0
|
前端开发 Linux 程序员
「CSS」知识点笔记:position
「CSS」知识点笔记:position
202 0
「CSS」知识点笔记:position
|
前端开发
CSS Position(定位)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。 也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
280 0
CSS Position(定位)
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
297 0