`

top、margin-top的区别

    博客分类:
  • CSS
 
阅读更多

1、top、bottom、left、right是绝对定位,必须设置position为absolute。

 

margin一系列设置是相对定位。

 

注意:如果用top等,而position未设置为absolute,那设置是不起作用的。

 

2、top这些在绝对定位的前提下,这个绝对定位,是相对body  或者  position:relative的父级元素的绝对定位。

 

     margin的相对定位,是指相对相邻元素的定位。

 

分享到:
评论

相关推荐

    margin-left和right失效(斯芬克斯)之谜

    通常这种情况发生在垂直方向上,即`margin-top`和`margin-bottom`。但是,本文讨论的是水平方向上的`margin-left`和`margin-right`失效问题。 #### 二、margin-left/right 失效的现象及原因 **现象:** 在某些情况...

    margin-top在火狐和IE的区别

    标题“margin-top在火狐和IE的区别”涉及的是网页布局中关于CSS属性`margin-top`在不同浏览器,尤其是Firefox和Internet Explorer(IE)之间表现不一致的问题。在描述中提到,当设置`margin-top`时,可能会导致定位...

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

    Firefox下margin-top会出错

    ### Firefox 下 `margin-top` 失效问题及解决方案 #### 一、问题概述 在进行网页设计时,尤其是在使用Mozilla Firefox浏览器环境下,开发者可能会遇到一个常见的布局问题:当尝试通过CSS中的`margin-top`属性来调整...

    DIV多层嵌套margin-top的BUG问题

    今天在做登录页面的时候发现个margin-top的bug ; 初始代码如下: html: 复制代码代码如下:”logo”></div> ”login_text”> ”error” class=”errorstyle”></div> </div> css: 复制代码代码如下:.errorstyle { ...

    父元素与子元素之间的margin-top问题(css hack)

    hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。 html代码: 复制代码代码如下: ”box1″> ”box2″>...

    margin-top塌陷问题的现象与解决的具体方法

    **CSS中的Margin-Top塌陷现象** 在CSS布局中,`margin-top`塌陷是一种常见的问题,它发生在当一个块级元素(子元素)的顶部外边距与其包含块(父元素)相遇时,导致父元素的上边界不是按照预期与子元素的上边界保持...

    CSS 同级元素position:fixed和margin-top共同使用的问题

    另外,如果body元素设置margin-top属性,那么结果会显示顶部固定元素会空出body的margin-top和content的margin-top中较大的距离。这是因为margin-top塌陷是针对块级元素之间的空间布局而言的,而设置body的margin-...

    ChangMM#javascript-html-css-issue#CSS-第一个子元素的margin-top1

    子元素的margin-top如下html其实我们给子元素设置一个margin-top,是想他相对父层节点顶部偏移20px,但是结果是如图:子层元素没有相父元素去

    margin 负值引起的层级(z-index)问题

    当使用负的margin值时,如题目中所提到的margin-top:-5px,可能导致元素在视觉上与相邻元素重叠,这可能会间接影响到z-index的效果。特别是在旧版的浏览器(如IE6和IE7)中,它们处理margin负值和层叠上下文的方式与...

    div标签中的元素margin-top失效的解决方法

    在Web开发中,CSS的margin属性被广泛用于调整元素之间的空间,包括顶部边距(margin-top)。然而,在某些情况下,即使正确应用了margin-top属性,页面上的元素似乎也没有按照预期产生顶部外边距,这种情况常见于元素...

    old_less-margin-helper-classes:CSS边距助手类使用类快速为元素分配边距

    更少的边距助手类 一组 LESS 边距辅助类,允许您使用纯 CSS 类快速为元素分配各种级别的边距。 安装 安装组件: $ ngx install less-margin-helper-....margin-top-xxs { margin-top : @margin-xxs ; } .margin-ri

    clear:both后margin-top不起作用其他左右下都起作用

    第二个`div`使用`clear:both`来确保它在垂直方向上不与第一个浮动`div`重叠,同时设置了`margin-top:20px`、`margin-bottom:20px`和`margin-right:20px`。 在这种情况下,`clear:both`的`margin-top`不起作用的原因...

    css中margin的缩写

    margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; ``` 这四个单独的属性可以被缩写为一个简单的声明: ```css margin: 10px 20px 30px 40px; ``` #### Margin的缩写规则详解 接...

    C语言39-通过USB发送命令读取ADC测试程序(STC32G-DEMO-CODE-220311kw)

    C语言39-通过USB发送命令读取ADC测试程序(STC32G-DEMO-CODE-220311kw)C语言39-通过USB发送命令读取ADC测试程序(STC32G-DEMO-CODE-220311kw)C语言39-通过USB发送命令读取ADC测试程序(STC32G-DEMO-CODE-220311kw...

    firefox margin-top失效的原因与解决办法

    在Web开发过程中,我们可能会遇到这样一个问题:使用`margin-top`属性本来是为了实现元素的上边距效果,但在某些浏览器中,比如Firefox,这个属性似乎并没有按预期工作,导致上边距没有正确显示。这便是本篇文档要...

    一个关于css中margin-right没有效果的问题

    margin-top:20%; margin-right:30%; } 复制代码代码如下: <html> <head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head> <body> <div class=”sty

    类似QQ的全套聊天系统

    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...

Global site tag (gtag.js) - Google Analytics