margin-top、top、以及position的总结

子元素的margin-top属性传递给父元素的问题

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的 margin 它越级，假传圣旨，把自己的margin当领导的margin执行。

margin-top与top的区别

1、使用top、bottom、left、right的前提是本元素position被定义为relative、absolute和fixed中的一种，不能是static

2、使用margin-top、margin-bottom、margin-left、margin-right的元素的position可以是static、relative、absolute和fixed

position各个属性值区分

1、本元素使用position的absolute时，margin-top以及top等属性表示相对父元素中position被定义为relative、absolute和fixed中的一种，如果直接父元素中没有被定义为relative、absolute和fixed的，那么一次向上寻找，直到body为止

2、本元素使用position的relative时，margin-top以及top等属性首先找相邻的元素，如果相邻的元素中有被定义为relative或者static的元素，则相对相邻的元素偏移，如果相邻元素没有被定义为relative和static，则相对父元素，父元素可以是static、relative、absolute、fixed的任意一种，其中要注意本元素在四个方向上的相邻元素是不同的！

3、本元素使用position的fixed时，margin-top以及top等属性表示相对body

4、static很少使用

总结起来：absolute是相对父元素的；relative首先是相对相邻元素，如果相邻元素不满足条件再相对父元素；fixed是相对body的

margin-top、top、以及position的总结相关推荐

sqlserver中的分页sql语句，不同于mysql中的limit，相当于top+top
方法1:适用于 SQL Server 2000/2005 SELECT TOP 页大小 *FROM table1WHERE id NOT IN (SELECT TOP 页大小*(页数-1) id FR ...
在才开始进入前端这个坑的时候在布局中会遇到很多问题我才入这个坑的时候在margin top 中遇到几个bug 我分享一下...
margin top的bug 当子元素和父元素是纯元素没有内容的时候,我们去调整子元素的margin:top, 他会误以为是要调整父元素解决方案: 1.给父元素设置一个边框 2.父元素加overf ...
盒子模型,top和margin-top
1. 标准盒子模型: width只是内容的宽度. 元素的总宽度=width + padding*2 +border*2 +margin*2. IE盒子模型: width=内容的宽度 + padding ...
CSS top、margin-top和padding-top的区别
参考文献 CSS padding 属性 CSS里的padding是什么意思? CSS margin 属性 top.margin-top的区别 padding指内边距,是盒子里面内容到边框的距离,不允许 ...
实用的60个CSS代码片段[转] 博客链接:http://blog.poetries.top
1.垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{position: rel ...
jsp大作业实现TOP粉丝俱乐部
jsp大作业,题目:TOP粉丝俱乐部,实现功能:登陆,注册,主页信息查看,购买周边,留言板,喜爱程度测试,对粉丝俱乐部的意见调查. login.jsp 登录页面: <%@page content ...
html 更改元素坐标,利用JS修改元素的位置属性，为什么style.left可行而style.top失效？...
Q.想利用JS中的move函数实现小图的斜线下移,但是明明代码几乎一样,left的移动可以实现,top却怎么也动不了台球桌 *{ padding:0; margin:0; } div{ backgr ...
(4)top详解 (每周一个linux命令系列)
(4)top详解 (每周一个linux命令系列) linux命令 top详解引言:今天的命令是用来看cpu信息的top top 我们先看man top top - display Linux pro ...
生成小分子力场TOP
生成小分子力场TOP 自动化工具是非常受欢迎的.对于每一个力场,都有一些方法或软件程序可以提供与各种力场兼容的参数.并不是所有的结果都一样准确.有几个例子,请参考下表: 力场自动化工具备注 AMB ...

margin-top、top、以及position的总结

margin-top、top、以及position的总结相关推荐

最新文章

热门文章