css之定位(position)

相对定位——relative

绝对定位——absolute

默认值——static

固定地位——fixed


定位:margin可以用来定位

absolute+margin定位

将absolute元素直接放在body标签下面

absolute实现元素显示隐藏

position:absolute;left:-999em

position:absolute;visibility:hidden

position:absolute;clip:rect(0,0,0,0)

使用display:none;或visibility:hidden实现元素显示隐藏,不能被辅助设备所识别

使用absolute实现元素显示隐藏,会产生重绘而不会产生强烈的回流

display:none实现元素显示隐藏,会尝试重绘,还会产生回流

推荐使用absolute实现元素的显示隐藏


absolute与等高布局


relative——相对定位

相对定位的最小化影响原则

<div class="test">

     <div class="box">.....</div>

     <div class='rel'><span class="abs">。。。</div></div>

</div>

如上面的列子,将需要绝对定位的元素单独放在一个relative属性的标签div下,relative就不会影响任何其他元素,仅仅是其内部的绝对定位元素,这就是 相对定位的最小化影响原则


推荐:

absolute+margin——左上角元素定位,作用与当前元素

float+relative——右上角元素定位,作用与当前元素

relative+absolute——右下角元素定位,直接父标签+当前定位元素

转载:来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 1.CSS盒模型 盒子模型有两种,分别是标准盒子模型和IE盒子模型。 CSS 把盒模型分为两种基本形态:Block...
    莫失丿莫忘阅读 3,607评论 0 2
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,915评论 0 6
  • 肖像漫画培训 肖像漫画定制 地址:大明湖畔曲水亭街——九画斋
    东域幻僧阅读 2,823评论 4 3
  • 一直向往的高中生活终于拉开了帷幕,高中生活是否是她们所期待的呢?几个闺蜜之间又会发生怎样的故事?她们是否能一起走...
    桔子妹妹阅读 1,756评论 1 0

友情链接更多精彩内容