子元素相对于父元素的绝对定位

1、参照定位的元素必须是相对定位元素的父元素

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> 
</div>

2、参照定位的元素必须加入position:relative;

box1{ width:200px; height:200px; position:relative; }

3、定位元素加入position:absolute;,便可以使用topbottomleftright来进行偏移定位了

box2{ position:absolute; top:20px; left:30px; }

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 974评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,325评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,665评论 0 30
  • 4夏日的趣事 前一篇,我和你说过农村的辛苦,不过暑假的农村除了这二十来天非常辛苦之外,倒也有不少乐趣。 小时候,家...
    吴桐wutong阅读 259评论 0 0