|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
网页制造POLUOLUO文章简介:CSS定位属性Position详解.
CSS中最经常使用的结构类属性,一个是Float(CSS浮动属性Float详解),另外一个就是CSS定位属性Position。
1.position:static
一切元素的默许定位都是:position:static,这意味着元素没有被定位,并且在文档中呈现在它应当在的地位。
一样平常来讲,不必指定position:static,除非想要掩盖之前设置的定位。
#div-1{
position:static;
}
2.position:relative
假如设定position:relative,就能够利用top,bottom,left和right来相对元素在文档中应当呈现的地位来挪动这个元素。【意义是元素实践上仍然占有文档中的原有地位,只是视觉上相对它在文档中的原有地位挪动了】
#div-1{
position:relative;
top:20px;
left:-40px;
}
3.position:absolute
当指定position:absolute时,元素就离开了文档【即在文档中已不占有地位了】,能够正确的依照设置的top,bottom,left和right来定位了。
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
网页制造POLUOLUO文章简介:CSS定位属性Position详解.
4.position:relative+position:absolute
假如我们给div-1设置relative定位,那末div-1内的一切元素城市绝对div-1定位。假如给div-1a设置absolute定位,就能够把div-1a挪动到div-1的右上方。
#div-1{
position:relative;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
5.两栏相对定位
如今就能够利用绝对定位和相对定位来做一个两栏结构了。
#div-1{
position:relative;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b{
position:absolute;
top:0;
left:0;
width:200px;
}
6.两栏相对定位定高
一种计划是给元素设定流动高度。但这类计划对年夜多半计划来讲不太合适,由于一样平常我们不晓得元素中会有几文本,大概将要利用的准确的字号。
#div-1{
position:relative;
height:250px;
}
#div-1a{
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b{
position:absolute;
top:0;
left:0;
width:200px;
}
网页制造POLUOLUO文章简介:CSS定位属性Position详解.
7.浮动
关于可变高度的列来讲,相对定位就不起感化了,以下是别的一个计划。
我们能够浮动一个元素,使它挪动到右边/右侧,而且是文本围绕着它。这次要用于图象,但这里我们把它用于一个庞大的结构义务(由于这是我们独一的工具)。
#div-1a{
float:left;
width:200px;
}
8.浮动列
假如我们把一个元素向左浮动,而且把第二个元素也向左浮动,theywillpushupagainsteachother。
#div-1a{
float:left;
width:150px;
}
#div-1b{
float:left;
width:150px;
}
9.扫除浮动列
在浮动元素以后,我们能够扫除浮动来使其他元素准确定位。
#div-1a{
float:left;
width:190px;
}
#div-1b{
float:left;
width:190px;
}
#div-1c{
clear:both;
}
英文原文:LearnCSSPositioninginTenSteps
中文译文:CSSPosition
网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。 |
|