CSS中的绝对定位
左直拳
我发现，CSS中的绝对定位并不如印象中的那样，一定要给left和top一个具体特定的数值，如：
<div id="divClosestool" style="position:absolute;left:100px;top:100px;background-color:Red;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:Yellow;">一人有一只马桶</div>
其实用相对值也是可以的：
<div id="div1" style="position:absolute;left:50%;top:50%;background-color:Red;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:Yellow;"><b>在水中央</b></div>
这样就真的显示在页面中央。
还可以使用“auto”。
“auto”应该是自动。怎么个自动法？
我也不清楚。不过，因为想做个下拉菜单的缘故，就应用了一回。大姑娘坐花轿，头一回。
得出的结论是元素会自动受所在容器约束。
<table border="1" style="width:450px;" align="center">
<tr><td align="center" width="33%">谎言</td><td align="center" width="33%">可恶的谎言</td><td align="center" width="33%">TMD可恶的谎言</td></tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<div id="div2" style="position:absolute;left:auto;top:auto;background-color:Green;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:white;width:200px;height:150px;z-index:-1;"><b>狗屎</b></div>
</td>
</tr>
<tr>
<td colspan="3" style="color:Red;">十天九地菩萨摇头怕怕霹雳金光雷电掌。一掌打出，方圆几百里无论人畜虾蟹都化为飞灰
</td>
</tr>
</table>
其实写在单元格<td>里的内容都受单元格的约束，不管有没有绝对定位。但为什么还要用绝对定位？我认为绝对定位有一个很大的好处，就是超然于页面格局排布之外，不受周围的元素位置影响。
结果将以上HTML代码放在一个页面中，即会产生如下结果：
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 414.75pt; HEIGHT: 285pt" type="#_x0000_t75"><imagedata o:title="css" src="file:///C:%5CDOCUME~1%5Cchenq%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.gif"></imagedata></shape>
(csdn的blog真烂)
完整代码如下：
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C">3C</chmetcnv>//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>左直拳摆地摊</title>
</head>
<body>
<div id="divMenu" style="position:absolute;left:100px;top:100px;background-color:Blue;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:Yellow;"><b>一人有一只马桶</b></div>
<div id="div1" style="position:absolute;left:50%;top:50%;background-color:Red;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:Yellow;"><b>在水中央</b></div>
<table border="1" style="width:450px;" align="center">
<tr><td align="center" width="33%">谎言</td><td align="center" width="33%">可恶的谎言</td><td align="center" width="33%">TMD可恶的谎言</td></tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<div id="div2" style="position:absolute;left:auto;top:auto;background-color:Green;font-size:<chmetcnv w:st="on" tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="18" unitname="pt">18pt</chmetcnv>;color:white;width:200px;height:150px;z-index:-1;"><b>狗屎</b></div>
</td>
</tr>
<tr>
<td colspan="3" style="color:Red;">十天九地菩萨摇头怕怕霹雳金光雷电掌。一掌打出，方圆几百里无论人畜虾蟹都化为飞灰
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题，让我们一...
### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
这种定位方式常用于创建微调或者作为绝对定位的参照物。 `absolute`定位脱离了正常文档流，它的位置相对于最近的非`static`定位的祖先元素（如果有，否则相对于body）。使用`absolute`时，`top`、`bottom`、`left`...
总结来说，CSS绝对定位是网页设计中调整元素位置的重要工具。它允许元素脱离文档流并相对于其他元素或视口定位，同时提供了`z-index`属性来控制元素的堆叠顺序。理解并熟练运用绝对定位，可以帮助开发者创造出更复杂...
绝对定位和相对定位是两种常用的定位技术，它们在网页设计中扮演着至关重要的角色。本教程将深入探讨这两个概念，以及如何在实践中有效利用它们。 ### 绝对定位 绝对定位允许一个元素相对于其最近的非静态定位祖先...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...
本文将深入探讨 HTML CSS 中的定位，包括绝对定位和相对定位。 首先，我们需要理解 CSS 中的基本定位方式。CSS 提供了多种定位模型，如静态定位、相对定位、绝对定位、固定定位和粘性定位。这些定位方式都是为了...
如果想要将绝对定位的元素包含在一个特定的父元素中，请确保将父元素的位置值设置为相对。正如上面所提到的，没有指定值的相对定位不会影响元素，除非给元素指定一个位置。子元素将使用该位置来计算出自己的位置值。...
CSS提供了多种定位方式，包括普通流、浮动以及绝对定位等，每种方式都有其特定的应用场景。 #### CSS Position属性详解 `position` 属性用于指定元素的定位类型，主要有以下几种： - **Static**：这是默认值，...
CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中，相对定位是基础，它允许元素相对于其原始位置进行偏移，但不会改变文档流。相对定位的CSS代码通常写作： ```css .element { position: ...
有了这个就可以搞定很多事情 在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
绝对定位元素经常与“子绝父相”的技术搭配使用，即子元素使用绝对定位，父元素使用相对定位，以此来精确控制子元素的位置。 固定定位与绝对定位类似，不同之处在于它是相对于浏览器窗口进行定位的。这意味着一旦...
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
绝对定位是CSS（层叠样式表）布局技术的一部分，它允许开发者精确地指定一个元素在网页上的位置，无视其在文档流中的正常位置。与相对定位不同，绝对定位的元素会完全脱离文档流，不会影响其他元素的位置。它依赖于...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
绝对定位的实现是通过CSS中的position属性实现的，该属性可以将元素的位置设置为绝对、固定、相对或静态等。 在CSS中，绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素...
3. **弹出框和提示**：绝对定位常用于创建浮动警告、提示信息或下拉菜单，使其独立于文档流。 4. **复杂布局**：在创建多列、网格或自定义布局时，浮动和定位可以协同工作，提供灵活的解决方案。 综上所述，CSS的...