css position
css position & top,left,bottom,right are used for position html element.
position has four values:static,fix,relative,absolute.
here is a example to show differents between position's four values:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css position</title>
<style type="text/css">
body {height: 2000px; width: 2000px; background-color: gray;position: relative;left: 100px;}
/* position */
.t1 {position: fixed; top: 200px; left: 300px;}
.t2 {position: relative; top: 50px; left: 100px;}
.t3 {position: absolute; top: 200px; left: 50px;}
/* colors */
.red {background-color: red;}
.green {background-color: green;}
.yellow {background-color: yellow;}
.purple {background-color: purple;}
.white {background-color: white;}
/* size */
div {width: 200px; height: 300px;}
.wh120 {width:120px; height:120px;}
.wh60 {width:60px; height:60px;z-index: 1;}
</style>
</head>
<body>
<div class="t1 red">
<div class="t3 white wh60"></div>
</div>
<div class="t2 green">
<div class="t3 white wh60"></div>
</div>
<div class="yellow"></div>
<div class="t3 purple wh120"></div>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://sugongqing.iteye.com/blog/323093
CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值: fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动: 实例 p.pos_fixed { position:fixed; ...
关于CSS position属性值absolute,relative的解释.zip
主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值: •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素...
如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话“如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的...
本文为大家解析了CSS Position定位,供大家参考,具体内容如下 当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会...
下面小编就为大家带来一篇CSS position:absolute全面了解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
网页制作学习教程:CSS Position.
css position 基础教程,非常经典,推荐大家收藏。
下面小编就为大家带来一篇css position 设置元素的定位方式详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。 有时候我们需要在父元素的容器内设置相对的绝对位置 要做到这一点需要把父...
CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的...
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
今天在看CSS的时候遇到了position: absolute、relative的问题,一直比较迷糊,今天终于搞清楚了。
a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?b=this.parents().filter(function(){return/(relative|absolute|fixed)/.test(a.curCSS(this,"position...
在父标签中使用了overflow:hidden;时,如果子标签中有元素的position设置成relative的时候,在IE6和IE7中父元素的overflow对其将不起作用,其实将父标签的position也设置成relative便可解决此问题