css中的绝对定位和相对定位

html-css029

css中的绝对定位和相对定位,第1张

css中的绝对定位，意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位，意思是是相对于上一个相对定位的，总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位，设置后，原来的位置始终保留着。绝对定位，设置后，原来的位置会被后面的内容占据。

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

*{ margin:0 padding:0}

#wrap{ width:290px height:290px background-color:#CC9

padding:10px 10px}

#div1{ width:100px height:100px background-color:#C3C}

-->

</style>

</head>

<body>

<div id="wrap">

<div id="div1"></div>

</div>

</body>

</html>

大盒子设置内边距 ，代码如上，效果如下：

设置div 相对位置后你可以将它邻近的盒子设置成relative相对定位，不脱标准。然后在里面加上这个盒子

#box_relative {

  position: absolute

  left: 30px

  top: 20px

}