html中怎么设置div的位置?

html-css022

html中怎么设置div的位置?,第1张

利用CSS的position属性对元素定位,以下是position 属性规定元素的定位类型。

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit

规定应该从父元素继承 position 属性的值。

1:定位的几个值

1.1,生成绝对定位的元素,相对于浏览器窗口进行定位。----->position:fixed

1.2.生成相对定位的元素,相对于其正常位置进行定位。------>position:relative

1.3.生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。---->position:absolute

1.4.默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。------>position:static

1.5.规定应该从父元素继承 position 属性的值。------>position:inherit

2:了解以上的几个定位属性值,其中最常用的是fixed 、absolute、relative

3:fixed和absolute会破坏文档流,意思是元素是漂浮上去的。

3.1而fixed通常是弹出层,置顶操作等业务用的

3.2,absolute是依据父级元素有没有position属性而生成的绝对与谁定位的。

3.3,relative不会破坏文档流通常是用在子级元素绝对于(absolute)父级元素 定位,而父级元素相对于(relative)自己定位.

4:如果你的div里面有子元素span。而子元素span想要绝对于父级div元素定位那么请这样写:div{position:relative}

div >span{position:absolutetop:50pxleft:50px}

5:对于以上还有哪里不理解或者讲解不清纯的请指正,提问。

6:望采纳!

可以用position属性来进行定位

<html>

<head>

<style type="text/css">

.2{position:absolutetop:20pxleft:30px}

#contain{position:relative}

</style>

<body>

<div id="contain">

<div class="1"></div>

<div class="2"></div>

</div>

</body>

</head>

</html>