深究CSS定位position的常用技法

所属分类: 网页制作 / CSS 阅读数: 412
收藏 0 赞 0 分享

本文针对CSS常用的6个属性进行探究,大家一定会对这篇文章满意的。

1.position:static

static属性是position的默认值,也就是说,当一个元素没有为其设定position属性时,它的默认值就是static。

2.position:absolute

这是一个经常会被用到的position属性值。如果为某个元素设定了absolute,则该元素脱离原来的文档流。形象一些说,比如a元素被定义了position:absolute,那么这个元素就不会与这个页面中的其他元素发生位置上的关系,而是凌驾于整个页面之上的漂浮状态。页面中的其他元素的位置变化、大小变化等,都不会影响a元素的位置,相当于一个局外人。

3.position:relative

relative是最有用的定义方法。设置了relative属性表示,该元素相对于自己原来位置发生的变化。比如,我们定义了一个b元素,给它设定如下css样式:

CSS Code复制内容到剪贴板
  1. #b{     
  2.     positionrelative;     
  3.     width:100px;     
  4.     height:100px;     
  5.     top:100px;     
  6. }     

该段代码定义的b元素,它的位置为相对于没有定义position属性的位置向下移动100px的距离。relative属性值的定义就是这样的定位模式。

4.position:fixed

fixed定位用的不多,但是它非常适用于固定模式的部分制作,比如顶部菜单。定义了fixed属性后,元素的位置不会随着任何行为发生变化。

5.relative+position

同时使用这两个定位,是一种很常用的手法,新手也可能会在此处遇见很多麻烦。总体来说,如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。比如,下面的代码利用二者的结合实现了一个两列布局;

CSS Code复制内容到剪贴板
  1. <span style="white-space:pre">    </span>#div-1 {     
  2.              position:relative;     
  3.             }     
  4.             #div-1a {     
  5.              position:absolute;     
  6.              top:0;     
  7.              rightright:0;     
  8.              width:200px;     
  9.             }     
  10.             #div-1b {     
  11.              position:absolute;     
  12.              top:0;     
  13.              left:0;     
  14.              width:200px;     
  15.             }     

内部的两个子div会根据其外部定位为relative的元素为参照进行绝对定位。

6.clear:both清除浮动

有的时候定位会出现塌陷现象,即子元素在父元素中,但是父元素的大小不会随着子元素的大小而被“”撑开“,导致了父元素的塌陷效果。这种bug的出现是由于子元素设定了 float属性,导致父元素的坍塌。要想解决这种bug,需要为父元素设定清除浮动。示例代码如下:

CSS Code复制内容到剪贴板
  1. <span style="white-space:pre">    </span>    #div-1a {     
  2.              float:left;     
  3.              width:190px;     
  4.             }     
  5.             #div-1b {     
  6.              float:left;     
  7.              width:190px;     
  8.             }     
  9.             #div-1c {     
  10.              clear:both;     
  11.             }     

以上就是关于CSS定位中常用的六个属性学习,希望对大家的学习有所帮助。

更多精彩内容其他人还在看

利用纯CSS3实现动态的自行车特效源码

这篇文章主要介绍了如何利用纯CSS3实现动态的自行车的方法,文中给出了完整的实例代码,实现后的效果非常不错,大家可以直接运行看看效果,需要的朋友下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发规范文档(2014年版本)

这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性,需要的朋友可以参考下
收藏 0 赞 0 分享

前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范

这篇文章主要介绍了前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
收藏 0 赞 0 分享

手把手教你用CSS实现带箭头的流程进度条

这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法,文中给出了详细的示例代码,对大家具有一定的参考价值,有需要的朋友们一起来看看吧。
收藏 0 赞 0 分享

CSS实现三栏布局的四种方法示例

可能有人不理解三栏布局是什么,其实三栏布局页面分为左中右三部分,然后对中间一部分做自适应的一种布局方式,下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

利用css实现浮雕效果示例代码

这篇文章主要给大家介绍了利用css如何实现浮雕的效果,文中给出了详细的示例代码和解释,相信对大家有一定的参考价值,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

浏览器默认样式(User Agent Stylesheet)的介绍与最佳处理方法

这篇文章主要给大家介绍了浏览器默认样式(User Agent Stylesheet)的相关资料,并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

css中px、em和rem的区别总结

相信每位前端工程师们都有这么一个体会,国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

CSS3实现点击放大的动画实例代码

这篇文章主要给大家介绍了关于利用CSS3实现点击放大的动画效果,文中给出了完整的实例代码,相信对大家具有一定的参考价值,需要的朋友们可以一起来看看吧。
收藏 0 赞 0 分享

利用css代码实现纸飞机效果实例源码

这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果,实现后效果非常不错,文中给出了详细的实例代码,大家可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多