一、首先介绍下CSS的定位属性
1.top, bottom, left, right
设置定位元素的上(下/左/右)外边距边界与其包含块上(下/左/右)边界之间的偏移,如果"position"属性的值为"static",那么设置"top,bottom,left,right"属性不会产生任何效果。
2.clear 规定元素的哪一侧不允许其他浮动元素
clear属性定义了元素的哪边上允许出现浮动元素
可能的值:
clear:left; 在左侧不允许浮动元素 clear:right; 在右侧不允许浮动元素 clear:both; 在左右两侧均不允许浮动元素 clear:none; 默认值,允许浮动元素出现在两侧
3.clip 剪裁绝对定位元素
该属性不能用于"overflow"设置为"visible"的元素
可能的值:
clip:rect(top,right,bottom,left); 设置元素的形状 /* 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值, 其中任一数值都可用auto替换,即此边不剪切 */ clip:auto; 浏览器设置元素的形状。
4.cursor 规定要显示的光标的类型(形状)
可能的值:
url; 需被使用的自定义光标的URL default;默认光标(通常是一个箭头) auto;默认。浏览器设置的光标。 crosshair;光标呈现为十字架。 pointer;光标呈现为指示接的指针(一只手) move;此光标指示某对可被移动。 e-resize;此光标指示矩形框的边缘可被向右(东)移动。 ne-resize;此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize;此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize;此光标指示矩形框的边缘可被向上(北)移动。 se-resize;此光标指示的矩形框的边缘可被向下及向右移动(南/东)。 sw-resize;此光标指示的矩形框的边缘可被向下及向左移动(北/西)。 s-resize;此光标指示矩形框的边缘可被向下移动(北/西)。 w-resize;此光标指示矩形框的边缘可被向左移动(西)。 text;此光标指示文本。 wait;此光标指示程序正忙(通常是一只表或沙漏)。 help;此光标指示可用的帮助(通常是一个问好或一个气球)。
5.display 规定元素应该生成的框的类型,即设置元素如何显示
可能的值:
none; 此元素不被显示。 block;此元素将显示为块级元素,此元素前后会带有换行符。 inline;默认,此元素会被显示为内联元素,元素前后没有换行符。 ...
6.float 规定框是否应该浮动
可能的值:
left;图像或文本浮动在父元素的左边 right;图像或文本浮动在父元素的右边 none;图像或文本浮动显示在它在父元素中出现的位置
注:如果在一行中对于浮动元素而言空间太少,则这个元素会跳到下一行,这个过程会持续到有足够空间的位置为止。
7.overflow 规定当内容溢出元素框时发生的事情
可能的值:
visible;默认值。内容不会被修剪,会呈现在元素框之外 hidden;内容会被修剪,并且其余内容是不可见的 scroll;内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 auto;如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 inherit;规定应该从父元素继承overflow属性的值
8.position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值:
static;默认。位置设置为static的元素,它始终会处于页面流给予的位置(static元素会 忽略任何top、bottom、left或right声明) relative;位置被设置为relative的元素,可将其移至相对于其正常位置的地方,因此"left:20px;"会将元素移至元素正常位置左边20个像素的位置 absolute; 位置设置为absolute的元素,可定位于相对于包含它的元素的指定坐标,此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。 fixed; 位置设置为fixed的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left"、"top"、"right"以及"bottom"属性来规定。不论窗口滚动与否,元素都会留在那个位置
relative与absolute的区别
(1).两者一般用在:在一个相对定位的元素里面放置一个绝对定期的元素
<div id="A" style="position:relative;"> <div id ="B" style="position:absolute;"></div> </div>
(2).子元素B可以通过top, right, bottom, left来精确定位,定位的参考目标就是其具有相对定位属性的父级元素A
(3).absolute属性,相当于从文档流中抽取出来,浮动在原平面排版上,形成“层”,如果有多个“层”,层与层之间就必然会有谁覆盖谁,谁在上谁在下的竞争关系,因此,未解决这个竞争,就产生了z-index(空间坐标系的Z轴),比较谁大,大的显示在上面
(4).如果父级元素A没有设置relative,那么B元素就会以body标签当做参考点
(5).元素A如果有margin属性,其值将作用于该元素的原来位置,由于原位置产生偏移,
该元素的最终位置将是margin与top, right, bottom, left共同作用后的位置,并且其周围元素的位置也将产生影响
(6).如果A,B都设置了top, right, bottom, left,对于B来说,其位置偏移的参考点都是A偏移后的位置,不是A的原始位置,如果B有margin,其参考点也是元素A偏移后的位置。
注:
a.当position属性值为relative时
对象原来占有的位置保留,其后面的对象按原来文档流规定自己的位置
top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有top起作用
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在,只有left起作用。
b.当position属性值为absolute时
对象从文档流中抽取出来,原占有的位置被后面的对象顶替下来
top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直位置保持不变
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变
9.z-index 设置元素的堆叠顺序
可能的值:
auto;默认,堆叠顺序与父元素相等 number; 如果为正,则离用户更近,为负数则表示离用户更远
相关推荐
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
这是我自己学习html和css定位(position)时做的练习,仅供初学者学习参考,特别是对定位理解不熟悉的可以参考一下!
本人整理的css定位
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
什么是css定位?css定位怎么使用.docx
css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜
div+css定位代码示例 说明了绝对和相对
css的绝对定位,相对定位,浮动的规则。等等等
div+css 定位浅析
1.05 css定位布局
借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: 复制代码代码如下: ”box1″> ”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600px;background:...
有关于css定位基础.txt
css定位布局.html
NULL 博文链接:https://chemzqm.iteye.com/blog/661513
CSS 定位网页元素
CSS属性之CSS定位[定义].pdf
css定位+动画.html
css定位的介绍大全.docx
有关CSS定位、隐藏的案例分享
网页css定位,滤镜 含有ppt课件+实例网页.