关于CSS Position(定位)

在CSS中,我们是通过position定位属性来进行定位的,它有如下几个属性值。常见的属性有如下几个:

absolute(绝对定位)

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于。元素的位置通过 "left",

"top", "right" 以及"bottom" 属性进行规定。absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。

例:{ position:absolute;

    left:100px;

    top:150px;}

fixed(固定定位)

生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。 Fixed 定位在 IE7 和 IE8 下需要描述!DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

relative(相对定位)

生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20"会向元素的 LEFT 位置添加 20 像素。移动相对定位元素,但它原本所占的空间不会改变。

最常见的使用方式有如下两种:

使用方法一:元素相对自身的原位置偏移某个距离,但是原本的空间依旧保留,表现为空白。

使用方法二:把一个元素设置为position: relative; 可以使该元素的子元素相对该元素绝对定位。

static(静态定位)

它是position的默认值,元素框正常生成,也就是没有定位时的正常显示。HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到 top,

bottom, left, right影响。

例:

div.static { position: static;

    border: 4px solid #fff;}

从上文可以看出absolute/fixed都有种跟浮动同样的效果,下面我们来将他们进行比较:

absolute/fixed和float对比相同之处:元素都会脱离文本流,从普通文本中删除,但是依旧会影响布局;都会生成一个块级框,无论原来是不是块级元素。不同之处:float的包含块是最近的块级祖先元素。

采用position定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。在使用的时候需要注意的是:定义偏移量的元素应为position值不是static的元素。有时也需要定义width和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据width和left属性定义左右,根据top和height属性定义上下。

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,310评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 3,137评论 0 7
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,994评论 5 15
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,492评论 2 66
  • 你走了已经十四年了。 时间过得真快。 你走的那年,我才11岁。喜欢的都是最新的流行歌,对你一无所知。 你走的轰轰烈...
    乱弹阿琳阅读 894评论 4 10

友情链接更多精彩内容