CSS笔记(十)position属性与定位

  参考:http://www.w3school.com.cn/cssref/pr_class_position.asp

  position属性规定了元素的定位类型。任何元素都可定位,其中,绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。

  

描述
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative
生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

CSS 定位属性

CSS 定位属性允许你对元素进行定位。

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
时间: 2024-12-26 19:31:53

CSS笔记(十)position属性与定位的相关文章

Swift学习笔记十:属性

1.存储属性       1. 作为特定类或结构实例的一部分,存储属性存储着常量或者变量的值.存储属性可分为变量存储属性(关键字var描述)和常量存储属性(关键字let描述). struct student{ let name = "" var score = 0 } let a = student(name:"小笨狼",score:96)           注意:                ① 定义储存属性时,需要为每一个属性定义一个默认值.在初始化的时候,

css中关于position属性的探究(原创)

关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定元素按照常规的文档内容刘(从左到右,从上到下)进行定位. absolute:独立定位,它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身. fixed:该值指定元素是相对于浏览器窗口进行定位的.不会随着文档其他部分而滚动. relative:元素按照常规文档流进行布局,它的定位相对于文档流中的

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

CSS中position属性三大定位方式讲解

Relative Relative的元素相对于它原本的位置来做定位,但是它的位置仍然存在,即使它作了偏移,它周围的元素也不会占领的它的位置.所以,Relative属性的盒子会覆盖其他的盒子,而不是推开其他盒子. 如果一个元素是相对定位(甚至它还做了偏移),它周围的元素在排版时参考的依然是那个元素原本的位置(指在没有偏移时的位置). 如果同时声明top和bottom的值,那么top值的优先级更高.如果同时声明left和right的值,那么优先级取决于网页的语言(例如,英语法语德语西班牙语).比如,

前端笔记十,大小、定位、轮廓相关属性

大小相关属性 height:用于设置对象的高度 max-height:设置对象的最大高度,如果该属性值小于min-height属性值,则自动转换为min-height的属性值 min-height:设置对象的最小高度 width:设置对象宽度 max-width:设置对象的最大宽度 min-width:设置对象的最小宽度 box-sizing属性:设置width,height控制哪些区域的宽度.高度:可使用值 content-box:设置的width,height控制元素的内容区的宽度和高度(只

css中的position属性

在css布局中,position发挥了极其重要的作用,很多的网页布局都要用position来完成.position有四个属性值static.absolute.relative.fixed. static 这个属性表示默认的位置,在设置它的时候,可以取消继承属性,在一般情况下则不需要设置这个属性. absolute 这个属性表示绝对定位.绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置就会相对于最初的包含块.元素原先在正常文档流中所占的空间会关闭,就好像该

css笔记04:属性选择器

1.属性选择器: 带有 title 属性的所有元素设置样式: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <style type="text/css"> 5

css笔记2:属性小知识

http://blog.sina.com.cn/s/blog_41698c170100oiau.html clear clear声明主要是对块元素的浮动(float)定义的,意思是取消浮动,属性主要有none | left |right | both 这个比较好理解:比如,在一个大容器内你定义了个元素float(不管它是float:left或right),那么后面的元素会与它一起分享大容器剩下的宽度,如果你想不和float一起同行显示,又不想在浏览器是错位,那就得用到clear:both 意思就

总结一下CSS中的定位 Position 属性

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. relative:生成相对定位的元素,相对于其