CSS中的利用margin和position定位时的不同
展开全部
先来看例子吧：
<HTML>
<head>
<style>
.red{border:2px solid red;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
以上代码在浏览器中的显示效果如下：
AAAA
BBBB
下面通过position属性来把AAAA往上移动8px，在head的style里面加入#a{position:relative;top:-8px;}即：
<HTML>
<head>
<style>
.red{border:2px solid red;}
#a{position:relative;top:-8px;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
而如果通过margin-top:-8px来调整的话，即：
<HTML>
<head>
<style>
.red{border:2px solid red;}
#a{margin-top:-8px;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
看到不同了吧，用position属性来调整的时候，只是被调整的div移动了，而下面的div不会动；用margin属性调整就不同了，下面的div也会相应的向上移动8px，但是并不影响下面的padding值。
<HTML>
<head>
<style>
.red{border:2px solid red;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
以上代码在浏览器中的显示效果如下：
AAAA
BBBB
下面通过position属性来把AAAA往上移动8px，在head的style里面加入#a{position:relative;top:-8px;}即：
<HTML>
<head>
<style>
.red{border:2px solid red;}
#a{position:relative;top:-8px;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
而如果通过margin-top:-8px来调整的话，即：
<HTML>
<head>
<style>
.red{border:2px solid red;}
#a{margin-top:-8px;}
</style>
</head>
<body>
<div style="padding:10px;width:100px;" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
看到不同了吧，用position属性来调整的时候，只是被调整的div移动了，而下面的div不会动；用margin属性调整就不同了，下面的div也会相应的向上移动8px，但是并不影响下面的padding值。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
margin正数是向外面扩展空间，负数是对本身内部扩展空间。
position 和margin 他们是没得好多关系的，position: absolute、relative。用于相对绝对定位。
position 和margin 他们是没得好多关系的，position: absolute、relative。用于相对绝对定位。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
margin 定位大概就是说一个框框在一堆框框里设置了对上下左右的距离
position定位就是吧这个框框拿出来 在上一级的大小中设置上下左右的距离
有事例的话可以讲解一下
position定位就是吧这个框框拿出来 在上一级的大小中设置上下左右的距离
有事例的话可以讲解一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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 属性的值。
margin可以设置距离上下左右的距离，可以跟fixed结合，来绝对定位。
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 属性的值。
margin可以设置距离上下左右的距离，可以跟fixed结合，来绝对定位。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
