【绝对定位元素left、right、top、bottom值与其margin和宽高的关系】的更多相关文章

绝对定位元素left、right、top、bottom值与其margin和宽高的关系

绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + left + right + marginLeft + marginRight = W 垂直方向: height + top + bottom + marginTop + marginBottom =H 由于绝对定位元素的这种特性,所以可以实现伪元素与宿主元素等尺寸效果以及绝对定位元素的水平垂直居中设置…

IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 308px; height: 308px; background-color: red; position: absolute; } .content{ width: 100px; height: 100px; backgro…

jq获取绝对定位与相对定位的top, left值

jquery 实现方法绝对var X = $('#ID').offset().top; var Y = $('#ID').offset().left; 相对var X = $('#ID').position().top; var Y = $('#ID').position().left;…

div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。

先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce-leftBox"> //左边的内容 </div> <div class="ce-rightBox"> //右边的内容 </div> </div> 2.css .ce-container { background: white…

html标签默认属性值之margin;padding值

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl…

css绝对定位元素实现居中的几个方法

一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0px; left:50%; margin-left:-30%; } 这样就能使得一个蓝色区域水平居中   二.绝对定位元素的完全居中实现 如果要问如何CSS实现绝对定…

position的用法（top, bottom, left, right 四个定位属性配合进行使用）

一般情况下 页面元素的定位方式是根据文档流也就是说默认的从上到下,从左到右的方式进行排列的,而将元素从文档流脱离出来显示的方式有两种,一种是 position 定位另一种是float 浮动,这里我们详细介绍下position的用法. position 常用的四种属性:   1 static(默认属性)  2 relative(相对属性) 3 fixed(固定属性)4 (absolute 绝对属性) position四种属性的用法: static(默认属性): 这个没什么好说的就是将就是将定位方式…

转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误

标准参考 元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute"."fixed"."relative" 之一的祖先元素组成:如果这个祖先元素不存在,则包含块由根元素组成. 绝对定位元素的定位 绝对定位元素的定位,依赖于其包含块.也就是说,当绝对定位元素的 "top"."left" 值被设置之后,…

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度…

【Web】CSS实现绝对定位元素水平垂直居中

网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .father { width: 800px; height: 400px; background-color: pink; margin: 100px auto; position: r…