top要配合position:relative和position:absolute使用。
http://stackoverflow.com/questions/4036176/css-top-vs-margin-top
You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down.
If you wanted the element to have no effect on the surrounding elements, you'd use positioning (abs., rel.) and the top, bottom, left, right settings.
上述说如果我们想移动一个元素, 但是却不影响其它元素的位置, 那我们就可以使用
position:relative|absolute + top:xx
如下图所示:
原本div1是在div2的上面。
当加入了position和top之后, div1被移动到了下面, 而div2没有收到影响。
当我们使用margin时, 就会导致其它的元素被下移,或者移开。
如下图所示:
这里div2随着div1一起被移动到了下面。
- 大小: 82.7 KB
- 大小: 75.7 KB
分享到:
相关推荐
本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...
Firefox下margin-top 会将上级DIV也往下移.
定位层被遮的问题,特别是在火狐和IE的区别
一种情况是元素的确不支持margin-top/bottom(参看:关于margin-top/bottom在inline元素(non-Replaced)上不起作用的解释); 另一种情况则是元素产生了margin叠加(参看:如何避开麻烦的margin叠加(margin collapsing...
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。 html代码: 复制代码代码如下: ”box1″> ”box2″>...
今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下: html: 复制代码代码如下:”logo”></div> ”login_text”> ”error” class=”errorstyle”></div> </div> css: 复制代码代码如下:.errorstyle { ...
子元素的margin-top如下html其实我们给子元素设置一个margin-top,是想他相对父层节点顶部偏移20px,但是结果是如图:子层元素没有相父元素去
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如题。...元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效。同学经验提示,对该元素的父元素属性设置成 overflow:hidden; 问题就解决了。
主要介绍了margin-top塌陷问题的现象与解决的具体方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
margin-top:20%; margin-right:30%; } 复制代码代码如下: <html> <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head> <body> <div class=”sty
MARGIN-TOP: 0px } P { FONT-FAMILY: "Verdana", sans-serif; FONT-SIZE: 70%; LINE-HEIGHT: 12pt; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 10px; MARGIN-TOP: 10px } .note { BACKGROUND-COLOR: #ffffff; COLOR...
MARGIN-TOP: 0px } P { FONT-FAMILY: "Verdana", sans-serif; FONT-SIZE: 70%; LINE-HEIGHT: 12pt; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 10px; MARGIN-TOP: 10px } .note { BACKGROUND-COLOR: #ffffff; COLOR...
主要为大家介绍margin 负值引起的层级(z-index)问题的解决方法,需要的朋友可以参考下
最近发现好多用margin-top实现的,上边距效果一直没有,一直都不知道什么原因,今天偶然看到了,特分享给大家
更少的边距助手类 一组 LESS 边距辅助类,允许您使用纯 CSS 类快速为元素分配各种级别的边距。 安装 安装组件: $ ngx install less-margin-helper-....margin-top-xxs { margin-top : @margin-xxs ; } .margin-ri
今天小组一同学做网站时,遇到一个关于margin-top兼容问题:有两个div,其中div1嵌套div2,而在div2里面设置margin-top后,在IE8、ff和chrome下显示的效果竟然不是想要出现的结果,而在IE7下面效果正确。