绝对定位占位_什么是绝对定位

导航：

• 1、求大神解释： 我要用CSS布局，请问绝对定位的坐标改怎么计算。可以举个例子说明下吗？？
• 2、css 什么时候用相对定位与绝对定位
• 3、如何让绝对定位占位
• 4、HTML，CSS position定位问题
• 5、div布局问题：定位和占位。

求大神解释： 我要用CSS布局，请问绝对定位的坐标改怎么计算。可以举个例子说明下吗？？

唉，乱七八糟。忍不了了！

我先给你按照我的理解说下，然后给你网站去理解吧，我也是从哪里理解的！

文档流的几种：

1.正常文档流。

2.浮动文档流。

3.定位的文档流。

其中你问的是定位。

定位又分为2中：

相对很绝对。

相对定位的文档流，保持占位，仍占据原来正常文档流的位置。在此基础上进行的

left:100px; top:100px; //一个表示从原来的占位点，向右、下各平移100PX。

绝对定位会脱离文档流，也就是出现了层叠覆盖的情况。

left:100px; top:100px;  它究竟跑哪里了呢？

这个坐标是以最近定位父元素为参考点的。

知道了这点你就可以计算了。

一般你需要先设置一个相对定位元素，然后在其里面定位绝对定位，这是最常见的！

几个例子：

div style="width:100px; height:100px; background-color:#c00;"

p style="width:50px; height:50px;"

span style="position:absolute;left:0; top:0; display:inline-block; width:10px; height:10px;"我绝对定位了/span

/p

/div

这个运行后

没有遇到已定位的父元素，于是BODY作为参照。

div style="width:100px; height:100px; background-color:#c00;"

p style="width:50px; height:50px; background-color:yellow; position:relative"

span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"/span

/p

/div

这个例子你自己运行吧。

还有：

div style="width:100px; height:100px; background-color:#c00;position:relative"

p style="width:50px; height:50px; background-color:yellow; "

span style="position:absolute;left:0; bottom:0; display:inline-block; width:10px; height:10px; background-color:blue;"/span

/p

/div

css 什么时候用相对定位与绝对定位

如果你的容器需要占位就用相对定位，如果不占位就用绝对定位。其实在我们做网页布局的时候基本上90%多都是相对定位，因为一般的网页布局相对定位都可以解决，除非弹窗，还有漂浮层，以及一些位置比较特殊的元素需要绝对定位或者fixed定位，剩下的都是相对定位。

如何让绝对定位占位

占位一般都是用下面的这个css样式，表示将元素隐藏，但是在网页中该占的位置还是占着。pre t="code" l="css"visibility: hidden;注意这个和display: none不同，display: none表示将代码彻底隐藏，也不占用位置。

HTML，CSS position定位问题

1.绝对定位和相对定位其实都一样，绝对定位是相对于整个html文档的位置(即整个页面)而言，相对定位是相对于内部标签的位置而言

2.“绝对定位和相对定位的占位问题”，不懂什么意思

3.我不知道那个边距是什么意思，left和top的设置是以margin的最边缘起算的

4.其实你说的margin-top没有效果恰恰是符合标准，你说的dreamweaver里有效是因为dreamweaver预览效果不符合标准，不用考虑它，当然加上margin的话如3所说会起作用，至于为什么，仅仅就是标准，没有为什么

5.可能你又要问margin-top没有效果怎么办，答案是div id="da"加上padding-top:1px;

div布局问题：定位和占位。

你可以把1、3套在一个层里，2、4套在一个层里。这两个外套的层可以不设置高和宽，让它们自适应。这样这两个层的高宽就由他内部的内容决定了。也就达到你要的效果了。

首先我们可以把1、3当作整体，2、4当作整体（理由是我们已经把他分别套在一个层里了）。当1隐藏3就自然上移，而2、4不变。也就实现了你的

3 | 2

| 4

此时如果在隐藏你的3，由于你1、3外套的层宽高是自适应的。所以也就实现了你的

2

4

（自然如果你要的是1、3原来的位置要保留 那就要把外套的层设置宽高。如果你的意思是1、3隐藏后2、4自动占用1、3的位置，那么你就只能把1、3的外套层的宽高设置自适应。因为这样当1、3隐藏后。此层的内容是空，它也就没有了宽和高。）

但1英才后再隐藏2时由于1、3是套在一个层里。2、4是套在一个层里。2隐藏4自然会上移代替2的位置。

所以也就实现了你想要的效果。

标签：绝对定位占位