搞后台的，很少搞div+css,今天看了一下phpcms的后台登陆界面，做的很简洁，看了代码，用了下相对定位和绝对定位
自己写的html代码：
<!DOCTYPE html PUBLIC "-//W3C//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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#testA{
width:500px;
height:500px;
margin:10px auto;
background:#CCC;
text-align:center;
}
#testB{
width:300px;
height:300px;
background:#0F3;
position:absolute;
bottom:0px;
left:100px;
}
#testC{
width:600px;
height:600px;
background:#F39;
position:relative;
}
</style>
</head>
<body>
<div id="testC">
<div id="testA">
<div id="testB"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript"></script><script type="text/javascript"></script>
如果有两个DIV〔A与B〕
并且B被嵌套与A中
现在你想达到的郊果是让B在任何情况下的垂直属性都为“居底”（与A底对齐）
那么你可能会想到用bottom:0px这样的作法，前提当然是position要设为absolut
但是你会发现，如果这样设的话，得到的效果是B对齐到了浏览器的最下边
这时就要用到position:relative了。
在A中加上一句position:relative，这样就定义了A内部元素的position:absolute是相对于A自身的，而不是浏览器！所以，B中的bottom:0px就会在执行时去找它的父级元素中有没有position:relatavie的，如果没有，它会继续向它更上一层去找
分享到：
相关推荐
在CSS（层叠样式表）中，`position`属性...总结起来，`position: relative`和`absolute`在CSS布局中各有其独特的功能和用途。理解并熟练运用它们，能帮助开发者更好地控制网页元素的布局，实现更复杂、精细的设计效果。
CSS Position relative 和 absolute 的区别 在 CSS 中，position 属性 plays a crucial role 在排版元素中。在 position 属性中，有五个值：static、inherit、fixed、absolute 和 relative。今天，我们将深入探讨 ...
总结来说，position: absolute和position: relative是CSS中用于控制元素定位的两个重要属性。absolute让元素完全脱离文档流并相对于最近的已定位祖先元素（或者初始包含块）进行定位，而relative则让元素保持在文档...
在CSS布局中，`position:relative`和`overflow:hidden`是两个非常重要的属性，它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先，我们来看`...
Position 属性有五个值：static、relative、absolute、fixed 和 inherit。其中，static 是默认值，relative、absolute 和 fixed 是动态定位的三种方式。 静态定位（Static Positioning） -------------------------...
本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，我们来了解`position: relative;`。这个值表示元素是相对定位的。当一个元素的`position...
Position属性有四个值：static、fixed、absolute和relative， 后面两个在布局中的定位里是经常用到的，顾名思义， absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对...
本文将详尽地探讨`position`属性中的`relative`和`absolute`值，以及它们在网页设计中的应用。 首先，`position`属性的默认值是`static`，这意味着元素遵循正常的文档流，即按顺序从上到下、从左到右排列。但当我们...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。在你的问题中，你特别关注了`position:relative;`的作用，这是一个基础且实用的定位方式。下面我会详细解释`position:relative;`...
《CSS position属性详解：absolute, relative及其他值》 在网页设计中，CSS（层叠样式表）的position属性是至关重要的，它决定了元素在页面上的布局方式。position属性有五个基本值：static、relative、absolute、...
在定位的众多属性中，CSS的position属性的两个值：absolute和relative，是经常被使用的。它们各自有着独特的特性以及应用场景。 首先，我们需要了解什么是绝对定位（absolute）和相对定位（relative）。绝对定位是...
`position`属性用于定义元素的定位模式，它有多种值，如`static`（默认值）、`relative`、`absolute`、`fixed`和`sticky`。当`position`设置为`relative`时，元素保持其正常流中的位置，但可以通过`top`和`left`等...
"CSS Position"是一个关键概念，它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式，包括静态定位（static）、相对...
`position`属性共有四种取值：`relative`、`absolute`、`fixed` 和 `static`。接下来我们将详细介绍这四种定位方式。 #### 1. Relative（相对定位） 相对定位是指相对于元素原本的位置进行偏移。当一个元素设置了`...
CSS中的position属性用于指定元素在文档流中的定位方式，它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值：static、fixed、relative、absolute，下面逐一详细说明。 1. static定位：这是...
CSS提供了多种定位方式，包括`static`、`relative`、`absolute`、`fixed`和`sticky`。本文将深入探讨`relative`与`absolute`定位方式在特定情况下的局限性及其解决方案。 #### 关键概念解释 - **position:relative*...