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;
}
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;
}
7. 浮动
对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。
我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工
具)。
#div-1a {
float:left;
width:200px;
}
8. 浮动列
如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。
#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;
}
分享到:
相关推荐
CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的...
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
但是涉及到弹出层、浮层、页面广告插件等等,都需要CSS中的position属性来定位了,对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等,下面我们就position属性基本的这三个值的...
这个对CSS的Position讲的很详细,希望对大家有帮助。嘎嘎。不要骂我。
对定位属性值进行详解,和常见用法的分享。在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一...
CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍...
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性 position:sticky用法 position:sticky 被
前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
position定位里的absolute,relative和fixed absolue:绝对定位,用top,bottom,left...首先我们要知道,css属性其实是一个立体空间有x,y,z轴,但是只有我们使用了position定位时,z轴上的层级关系才体现出来,即z-in
对定位属性值进行详解,和常见用法的分享。在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。在本文中,任何一...
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法。 在此首先看一下官方对这两个属性值的解释: position 属性值的含义: static ...
positon有4个属性:static relative absolute fixed,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。relative 不脱离文档流,参考自身静态位置通过 top,bottom,...
3、 css定位的属性: position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 ...
CSS的 position 属性设置元素的定位方式,为将要定位的元素定义定位规则。该属性对脚本编写动画特效十分有用。 1、定位元素(positioned element)是计算后位置属性分为: relative(相对)、absolute(绝对) 、 ...
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值,元素处于正常...
•background-color 颜色 •background-position 位置 •background-size 大小 •background-repeat 如何重复背景图像 •background-origin 背景图片的定位区域 •background-clip 背景的绘制区域 •background-...
position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值: •static •relative •fixed •absolute •sticky 然后使用top,bottom,left和right属性定位元素。但是,除非...