html有关position与margin的有趣现象
2014-11-19 22:41
411 查看
今天写脚本时有这么一段
<div id="leftcatalog">
<div> <a class="content" href="#ct1">商家入驻</a><br> </div>
<div> <a style="top:20px;position:relative" class="content" href="#ct2">买家指南</a><br> </div>
<div> <a style="top:40px;position:relative" class="content" href="#ct3">聊天工具使用</a><br> </div>
<div> <a style="top:60px;position:relative" class="content" href="#ct4">联系我们</a> </div>
</div>
<div class="mainbody">
<h2 id="ct1" class="paragraph">商家入驻</h2>
<p id="ct2" class="paragraph">买家指南</p>
</div>
然后惊奇的发现,当leftcatalog中的position属性为fixed时,mainbody中的margin将不再将leftcatlog作为参照,而是将浏览器作为参照。
<div id="leftcatalog">
<div> <a class="content" href="#ct1">商家入驻</a><br> </div>
<div> <a style="top:20px;position:relative" class="content" href="#ct2">买家指南</a><br> </div>
<div> <a style="top:40px;position:relative" class="content" href="#ct3">聊天工具使用</a><br> </div>
<div> <a style="top:60px;position:relative" class="content" href="#ct4">联系我们</a> </div>
</div>
<div class="mainbody">
<h2 id="ct1" class="paragraph">商家入驻</h2>
<p id="ct2" class="paragraph">买家指南</p>
</div>
然后惊奇的发现,当leftcatalog中的position属性为fixed时,mainbody中的margin将不再将leftcatlog作为参照,而是将浏览器作为参照。
相关文章推荐
- 往TextField的htmlText属性添加img标签时的更有趣现象
- 浮动和margin-left负值的有趣现象
- 4:--1margin的塌陷现象.html
- HTML:margin塌陷现象的解决
- 【HTML/CSS】margin-top、top、以及position的总结
- VBA中的有趣现象
- html position 用法
- html使用position:relative制作引导层
- 一个有趣的数学现象
- jsp学习---css基础知识学习,float,position,padding,div,margin
- html之position总结
- html中使用margin:0 auto整个页面不居中的解决方法
- Kooboo CMS - Html.FrontHtml.Position 详解
- 一个有趣的现象----innodb_io_capacity
- 有关去掉html中的两端字符
- Html Css Position
- 有关Html中<a>、<link>和<script>标签中相对路径与绝对路径的问题总结
- html标签默认属性值之margin;padding值
- 有关位置问题:原生JS e.clientX e.pageX JQ中offset() position()
- 有趣的Html