CSS:position的使用

在编写css时经常用到position属性,position主要是控制元素布局中的定位机制,默认情况是static,但是还是会随着正常流中的默认位置偏移。它还有其他几种属性:

  • fixed
  • relative
  • absolute
  • inherit

下面依次说明介绍一下。

绝对定位

  • fixed
  • absolute

相对定位

  • relative

无定位

fixed

fixed是一种绝对定位,它的特点是相对于浏览器窗口定位,一般调整位置时用到的属性是top,bottom,right,left.(一般我们制作网站时,常常要考虑网站的缩放元素位置不变,这个时候,个人比较喜欢用的就是fixed了。不过这个有个不便之处,就是位置是定死的,之后修改啥的,会比较麻烦(当然了,目前还没找到其他的解决方式,都是把位置定死的,如果大神们有其他的解决方式,麻烦告诉我一下)。另外,目前比较流行响应式设计,boostrap的响应式设计个人感觉还是很强大的,大家可以去他们的官网看看,这里附上一个链接好了 但是在网页缩放都不改变位置上,还是要避免响应式设计。

absolute

这也是一种绝对定位。相对于不是static的第一个父元素进行定位,主要也是top,bottom,left,right属性来更改(具体的之后会补充更新)

relative

相对定位,相对于正常定位的元素进行定位。
<h1>正常定位的标题</h1>
<h2 style=`position:relative;left:-20px`>是向左移动20px</h2>
<h3 style=`position:relative;left:20px`>向右移动20px</h2>

#######效果可以类似模拟一下
<strong> 正常定位的标题</strong>
<strong>是向左移动20px</strong>
<strong>向右移动20px</strong>
至于inherit,用的很少,据说是从父元素继承 position 属性的值。IE对其的兼容性并不客观……

<strong>菜鸟新手,不足之处请指正补充!后续学习了会更新哒~~~</strong>

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 1,112评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 965评论 0 1
  • 当温热的南风换成萧瑟的北风吹拂刚收割完玉米的大地时,那个爱玩的人骑着摩托在小巷的拐角处找到了我。 他说:"咱们玩个...
    假紫罗兰酮阅读 99评论 0 0