<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
</head>
<body>
<div style="border:1px solid #FF6600;height:600px;width:900px;position:relative;margin:50px auto;">
<div style="position:absolute;right:5px;top:5px;border:2px solid #777;height:200px;width:300px;font-size:12px;">
</div>
<div style="position:absolute;right:5px;bottom:5px;border:2px solid #777;height:200px;width:300px;font-size:12px;">
</div>
<div style="position:absolute;left:5px;bottom:5px;border:2px solid #777;height:200px;width:300px;font-size:12px;">
</div>
<div style="position:absolute;left:5px;top:5px;border:2px solid #777;height:200px;width:300px;font-size:12px;">
</div>
<div style="position:absolute;left:100px;top:100px;border:2px solid #777;height:200px;width:300px;font-size:12px;">
</div>
</div>
</body>
</html>
分享到：
相关推荐
本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`属性是至关重要的。这个属性决定了元素如何在页面上定位。当`position`的值设为`absolute`时，元素就进入了绝对定位...
### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...
绝对定位的理解
在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题，让我们一...
绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。示例： [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0...
浮动、绝对定位和相对定位是CSS中的关键概念，它们对于创建复杂的网页布局至关重要。本讲座将深入探讨这些概念，帮助您理解何时及如何有效地使用它们。 1. CSS 浮动（Float） 浮动最初是为了实现文本环绕图像而引入...
1.CSS背景试验1.doc 2.CSS背景试验2.doc 3.CSS颜色.doc ...10.CSS绝对定位.doc 11.CSS相对定位.doc 12.CSS垂直定位.doc 13.CSS尺寸.doc 14.CSS显示.doc 15.CSS可视性.doc 16.CSS浮动.doc 17.CSS清除浮动.doc
web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页...
本文将重点介绍几种常见的 CSS BUG 以及它们的处理方法，帮助开发者们更好地定位和解决问题。 #### 1. IE6 Three Pixel Gap 与 IE5/6 Doubled Float-Margin Bug **IE6 Three Pixel Gap**：这是一种在 Internet ...
绝对定位元素经常与“子绝父相”的技术搭配使用，即子元素使用绝对定位，父元素使用相对定位，以此来精确控制子元素的位置。 固定定位与绝对定位类似，不同之处在于它是相对于浏览器窗口进行定位的。这意味着一旦...
本教程将深入探讨两种主要的定位方式：相对定位和绝对定位，这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位（relative） 相对定位是CSS定位的基础，它保持元素在正常文档流中的位置，但允许通过`top`、`right`、...
有了这个就可以搞定很多事情 在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
在探讨CSS控制div在网页中的位置这一主题时，我们聚焦于两种主要的定位技术：CSS绝对定位和CSS相对定位。这两种方法在网页设计中扮演着关键角色，尤其当设计师需要精确控制元素位置时。 ### CSS绝对定位（Absolute ...
绝对定位和相对定位是两种常用的定位技术，它们在网页设计中扮演着至关重要的角色。本教程将深入探讨这两个概念，以及如何在实践中有效利用它们。 ### 绝对定位 绝对定位允许一个元素相对于其最近的非静态定位祖先...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。静态定位是元素的默认定位方式，不改变元素在文档流中的位置。相对定位则...
CSS提供了多种定位方式，包括静态定位（static）、相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），每种定位方式都有其独特的特性和应用场景。 #### 静态定位（Static） - **定义**：静态定位...