`
阿尔萨斯
  • 浏览: 4182179 次
社区版块
存档分类
最新评论

学习CSS中的Position

 
阅读更多

我的CSS知识很菜,此文完全是为了备忘,所以高手可以飘过了。

=========================

CSS的Position很重要,有以下几个值:static,relative,absolute,fixed。

Static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。

Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。

Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

<div style="position: relative;">

<div style="position: absolute; top: 10px; left: 10px;"></div>

</div>

参考链接:http://reference.sitepoint.com/css/position

分享到:
评论

相关推荐

    HTML CSS——position学习终结者(二).zip

    HTML CSS——position学习终结者(二).zip 欢迎下载!!!

    DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...

    css2中文手册 学习css的必选

    这个是学习css 必须要有的手册,里面包含了大部分css的属性,规则,下面是大纲 CSS Properties Reference 样式表属性 字体 Font font color font-family font-size font-size-adjust font-stretch font-style ...

    举例详解CSS中position属性的使用

    主要介绍了举例详解CSS中position属性的使用,是CSS入门学习中的基础知识,需要的朋友可以参考下

    谈谈你对css中position五个属性的理解

    static | relative | absolute | fixed | inherit,也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解,感兴趣的朋友跟着本文一起学习吧

    深入理解css中position属性及z-index属性(推荐)

    主要介绍了深入理解css中position属性及z-index属性(推荐),想要学习了解CSS样式的同学,可以了解一下。希望对大家的学习有所帮助。

    网页制作学习教程 CSS Position

    网页制作学习教程:CSS Position.

    CCS学习资料css项目源码和文档资料.zip

    CCS学习资料css项目源码和文档资料: css基础.pdf CSS基础(源代码).zip css字体和文本样式.pdf CSS字体和文本样式(源代码).zip CSS布局案例.pdf CSS网页布局基础.pdf css网页布局案例.rar css背景与列表ppt.pdf ...

    CSS的position属性完全解析

    对于前端开发工程师来说,编写CSS是前端开发工作中必不可少的一个内容,在CSS中的position属性又是非常重要的一个方面。顾名思义,所谓position,即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石,看似很...

    css定位学习小结.md

    属性:position 作用:检索或者设置元素的定位方式(改变元素位置的属性) *定位分为静态定位,绝对定位,相对定位,固定定位,粘性定位* (1)static 静态定位: position的默认值,默认文本流的状态。...

    通过设置CSS中的position属性来固定层的位置

    position 属性规定元素的定位类型,这个属性定义建立元素布局所用的定位机制,本文给大家介绍通过设置CSS中的position属性来固定层的位置,感兴趣的朋友一起学习吧

    理解CSS浮动float、定位position

    本文针对CSS浮动float、定位position进行学习理解,通过实例帮助大家掌握CSS浮动float、定位position技巧,感兴趣的小伙伴们可以参考一下

    CSS之Position全面认识

    CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,新手朋友们可以学习下

    CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

    在学习CSS,学到了了定位,在写代码的时候发现了一个小问题关于固定定位的。 首先我阐述一下什么是定位,定位就是将盒子定在某一位置,自由的漂浮在其他盒子的上面(这些盒子包括标准流和浮动),定位的语法为:定位...

    Html+div+CSS布局

    资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...

    深入学习CSS中如何使用定位(小结)

    position 属性在英文单词中表示 位置 的意思,在 CSS 中主要作用设置元素的定位。 CSS 中一共有 3 种定位如下:      属性值 描述 fixed 设置固定定位。 relative 设置相对定位。 absolute 设置绝对...

    div+css有实例,易学易懂

    3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta 标签 4.5 CSS 的调用 4.5.1 调用样式表的几种...

    html+css定位练习

    这是我自己学习html和css定位(position)时做的练习,仅供初学者学习参考,特别是对定位理解不熟悉的可以参考一下!

    div的position属性

    小伙伴们学习了12-6小节的绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:...

Global site tag (gtag.js) - Google Analytics