static问题

老师，您视频说static自然定位设置margin值取最大的，relative也一样啊，还有块设置了宽和高时在static下margin-left :auto与margin-right:auto设置块居中的话relative也可以啊，并没你说的特别之处啊，这样搞的好乱啊

慕圣2241928 2018-08-30

源自：CSS定位 2-1 position-static

收起

3回答

好帮手慕阿莹 2018-09-03 10:24:52

1、position:absolute; 意思是绝对定位，是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

例如父级设定position：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Document</title>
 <style> 
 .per{ 
	 position: absolute;
	 /*position: relative;*/
	 width:300px;
	 height:300px;
	 background:red;
	 margin-top:200px;
	 margin-left: 200px; 
	 } 
.son{ width: 100px;
	 height: 100px;
	 background:blue;
	 position: absolute;
	 left:0px; top:0px; } 
 </style>
 </head> 
 <body>
	 <div class="per">
		<div class="son">
		</div> 
	</div> 
 </body> 
 </html>

2、javaweb课程的布局案例同学是指的那个案例呢？是网页布局案例么？建议同学指出代码。

如果需要贴代码，注意不要贴在回复里，会失去代码的格式。可以在回答里贴一下。

收起回答

chrismorgen 2018-08-31 19:01:13

由此得出结论static和relative的区别为：

static：静态定位，是定位的默认值，相当于是没有定位，因此，元素出现在正常的流中，并且设置定位偏移量（left、top、right、bottom）没有效果。
relative 相对布局方式，允许元素通过（left、top、bottom、right ）来相对的偏移。

关于margin取最大值的问题：

margin设置外边距取两者最大值是margin属性的特性，简单地说，margin外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

因为static相当于是默认值，left、top、bottom、right无效，所以设置了static的时候，margin设置外边距取两者最大值。

但是设置了relative之后，使用left、top、bottom、right来相对的偏移之后，受定位偏移的影响，就不会取两者最大值了。

实际开发中常用relative和absolute,同学掌握这两种常用方法即可。static方法可作为了解和拓展的知识。祝学习愉快~

收起回答

提问者慕圣2241928 #1

老师left、top、bottom、right相对的偏移与margin-left，margin-right等有什么区别，还有就是绝对定位的left、top、bottom、righ偏移是相对于谁而言的呢？

2018-09-01 11:18:10
慕布斯37364 回复提问者慕圣2241928 #2

margin-left，margin-right 是外边距，绝对定位的left、top、bottom、righ偏移是相对设置了relative的元素的偏移，如果没有设置relative，则是相对它父元素的位置进行偏移。

2018-09-02 12:07:47
提问者慕圣2241928 回复慕布斯37364 #3

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .per{ width:300px; height:300px; background:red; margin-top:200px; margin-left: 200px; } .son{ width: 100px; height: 100px; background:blue; position: absolute; left:0px; top:0px; } </style> </head> <body> <div class="per"> <div class="son"></div> </div> </body> </html> 老师您给我解答的意思我好像没明白你的意思，按照我对您给我解释的理解那么请问上面代码的例子中子div元素为什么没有相对于父元素div位子偏移反而是相对于body偏移呢？还有就是在javaweb课程的布局案例中，class为main的div并没有设置border和padding属性（在前面的课程中有老师回答我说要设置border或padding属性），那么请问button标签设置margin-left属性时怎么会相对于main的位置便宜呢？他不是相当于body偏移吗？请老师详细帮我解释上面的每个问题，不然个人感觉很难学习这门课程，因为这门课程老师在视频中并没有详细介绍这些细节，只是给介绍一下概念。我认为这些细节老师应该在讲课的时候讲清楚比较好，而且在讲案例的时候老师用到了这些知识但是案例时老师又不讲这些细节所以很难理解，问题也积攒了很多。而且该门课分的老师又多，每个老师又不知道前面老师讲没讲该内容，这样就搞得教学效果很不好。最后还有就是回答学生问题的老师又不同，而且回答的不是很全面。这些都给学习带来困难。

2018-09-02 15:34:26

chrismorgen 2018-08-31 13:44:04

static：无特殊定位，元素出现在正常的流中。top，right，bottom，left等属性不会被应用。

relative：元素出现在正常的流中，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。同学还有哪里不明白的吗？可以继续提问。祝学习愉快~

收起回答

提问者慕圣2241928 #1

您说的 static：无特殊定位，元素出现在正常的流中。top，right，bottom，left等属性不会被应用。这啥意思？？还有margin设置外边距取两者最大值问题不只是static特有吧？relative好像也一样啊

2018-08-31 14:45:13