LS什么玩意。知道都有广告。还牛头不对马嘴。。。强烈谴责一下。
至于LZ的问题。
<div id="outer">
<div id="inner">
</div>
</div>
#outer {
position: relative;
}
#inner {
position: absolute;
}
只要你的基础元素有position: relative。那它里面的元素用position: absolute就会基于外面的那个元素的位置。
如果两个元素不是嵌套元素(nested element) 而是同等级别的，那需要使用javascript来完成。
浏览器的原地位置就是你电脑窗口默认的左上角其实位置即0,0
通过domgetBoundingClientRect()可以获取DOM到浏览器窗口左上坐标
function test(){
var o = documentgetElementById("t");
var rect = ogetBoundingClientRect();//返回一个TextRectangle对象，包含left, top, right和bottom几个只读属性，以px为单位来表示边界框相对视窗左上角的位置。
var iLeft1 = rectleft-documentdocumentElementclientLeft, iTop1 = recttop-documentdocumentElementclientTop;
var iLeft2 = ooffsetLeft, iTop2 = ooffsetTop;
while (ooffsetParent) { o = ooffsetParent; iLeft2 += ooffsetLeft; iTop2 += ooffsetTop; }
iLeft2 -=documentdocumentElementscrollLeft;
iTop2 -=documentdocumentElementscrollTop;
alert(iLeft1+"_"+iLeft2)
alert(iTop1+"_"+iTop2)
}
然后绝对定位和相对定位的区别就是一个不占据文档流一个占据，通俗点说就想一杯水一样一个是水上面的油之类的漂浮东西它是不占据实际物理区域的，你把它到在水面的那里它就飘在哪里，然后绝对定位就像你被子里面原先放的装饰物品之类的东西它占了水杯的物理位置的！
最后STAIC 就是默认属性，它是默认的定义后，就是说元素本身改是什么属性就是什么属性它由浏览器本身去决定
绝对定位，，你可以先将表格，放在一个div层里边比如<div id="tablecontent"><table></table></div>然后css这样<style>#tablecontent {position:absolute;//绝对定位这儿一定是absolute否则，left,top无效left:100px;//距浏览器左边框距离top:|100px;//距浏览器上边框距离}</style>
可以采用css中的position来实现决定定位。
1、代码实例如下：
<html>
<head>
<style type="text/css">
pone
{
position:fixed;
left:5px;
top:5px;
}
ptwo
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
此实例是相对于浏览器边框进行的定位。
2、补充相关知识
bsolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
相对定位和绝对定位
定位标签:position
包含属性:relative(相对) absolute(绝对)
1position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。(再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框)
2position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。)
3父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。
4相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
css常用的定位方式有五种：
1、static定位(普通流定位) -------------- 默认定位
2、float定位(浮动定位) 例：float:left;
有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
如果父元素的宽度太窄，那么其他浮动元素会向下移动，直到有足够的空间（左图所示）；如果浮动元素的高度不同，那么其他浮动元素向下移动时，就有可能会出现卡住的情况（下图所示）
注意：浮动元素的外边缘不会超过父元素的内边缘；浮动元素不会上下浮动；浮动元素不会互相重叠，会像行内块元素一样排列。
如果想要既设置浮动，又使父元素的高度被浮动元素撑开，即清除子元素浮动对父元素带来的高度的影响，有四种方法可以实现：
假设HTML代码部分为：
<div class="parent"> 这是父元素
<div style="float:left"> 这是子元素</div>
</div>
1) 为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
CSS代码部分：
parent{
//
height:xxx; //某个固定值
}
2) 在父元素内，在浮动元素的下方多写一行代码：<div style="clear:both"></div> ------------- 缺点：增加代码冗余
HTML代码部分：
<div class="parent"> 这是父元素
<div style="float:left"> 这是子元素</div>
<div style="clear:both"></div>
</div>
3) 为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
parent{
//
overflow:hidden ; //某个固定值
}
4) 内容生成 ------------- 最优的方法，推荐
CSS代码部分：
parent:after{
content:'';
display:'block';
clear:both;
}
3、relative定位(相对定位) position:relative;
相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4、absolute定位(绝对定位) position:absolute;
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
5、fixed定位（固定定位）position:fixed
相对于窗口的位置，而且不受其他网页内元素影响，永远处于浏览器窗口的相对位置。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。
以上就是关于CSS关于某个元素的绝对定位全部的内容，包括:CSS关于某个元素的绝对定位、浏览器的原点位置在哪如何确定坐标 元素的绝对定位和相对定位的区别是什么请举个通俗的例子。、css如何设置表格绝对定位等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）