好久不写CSS代码 感觉忘的差不多了,代码就是要多敲才行的。就行武林中的武者一样,每天都要勤加练习才可。
正好写写博客,就当复习复习。
position 主要是用来 元素的定位方式
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed : 绝对定位,不随滚动框改变位置。
下面是一些代码示例,有兴趣的可以敲一下,知识都在代码里。
<!DOCTYPE html>
<html>
<head>
<title>囚徒</title>
<meta charset="utf-8" />
<style type="text/css">
h2.a{ /* 绝对定位 */
position:absolute;
left:200px;
top:150px;
}
h3.b{ /* 相对定位 */
position:relative;
left:-20px;
}
h3.c{ /* 相对定位 */
position:relative;
left:20px;
}
h2.d{
position:fixed;
top:50px;
right:30px;
}
img.v{
position:absolute;
clip:rect(0px,50px,200px,0px);/*修剪为矩形*/
}
img.x{
position:absolute;
left:200px;
top:100px;
z-index:-1; /*等于-1 默认是0的 那么他的优先级就更低了,字体就在图片上了。*/
}
</style>
</head>
<body>
<h2 class="a">赏金猎人,女枪正在大杀特杀。</h2>
<h3 class="b">皮城女警,终结了蛮王的大杀特杀,完成三连杀。</h3>
<h3 class="c">皮城女警,终结了蛮王的大杀特杀,完成三连杀1。</h3>
<h2 class="d">提莫队长正在待命</h2>
<p><img class="v" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
<p><img class="x" border="0" src="http://ubmcmm.baidustatic.com/media/v1/0f0002sMjlteo6mTNXP84s.jpg" width="250" height="250"></p>
</body>
</html>
分享到:
相关推荐
CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。 position的四个属性值: relative absolute ...
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
NULL 博文链接:https://sugongqing.iteye.com/blog/323093
css_position.pdf
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
position定位包含哪些
这个对CSS的Position讲的很详细,希望对大家有帮助。嘎嘎。不要骂我。
主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下
CSS-position(定位)中的static、relative、fixed、absolute、sticky以及重叠的简单应用
实现div居中的方法有很多,本例介绍的使用css中position:fixed来实现div的上下左右居中,下面以一个DIV 元素在浏览器窗口居中为例
css的position里的relative和absolute的区别.docx
批量输出 CSS background-position 属性的定位像素值
CSS网站布局复习题 CSS网站布局复习题
在父标签中使用了overflow:hidden;时,如果子标签中有元素的position设置成relative的时候,在IE6和IE7中父元素的overflow对其将不起作用,其实将父标签的position也设置成relative便可解决此问题
HTML CSS——position学习终结者(二).zip 欢迎下载!!!
《CSS样式》 复习题 练习题
CSS中的定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。该模式包括了常规文档流,浮动,和几种类型的 position 定位的元素。其中,CSS position 属性可以取5种值:position: ...
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。 如何学习DIV+CSS...
第三部分:relative定位 第四部分:absolute定位 第五部分:重叠的元素--z-index属性 第六部分:脱离档流导致的问题
NULL 博文链接:https://onestopweb.iteye.com/blog/2339092