CSS元素的定位

1. position:static|无定位

position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位

example:

#div-1 {
position:static;
}

2. position:relative|相对定位

使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置。

如果要让div-1层向下移动20px,左移40px:

example:

#div-1 {
position:relative;
top:20px;
left:40px;
}

如果用到相对定位,紧随他的层divafter是不会出现在div-1的下方,而是和div-1在同一个高度出现。

可见, position:relative;并不是很好用。

3. position:absolute|绝对定位

使用position:absolute;,能够很准确的将元素移动到你想要的位置,

让我将 div-1a 移动到页面的右上角:

example:

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在,丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用,但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。

*这里有个Win IE的bug需要提到,就是如果为绝对定位的元素定义一个相对的宽度,那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。

4. position:relative + position:absolute|绝对定位+相对定位

如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute,那么子元素(div-1a)的位置将相对于父元素(div-1),而不是整个页面。

时间: 2024-09-19 10:03:49

CSS元素的定位的相关文章

实例详解网页制作中CSS元素的定位应用

css|网页|详解 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 {  position:static; } 2. position:relative|相对定位 使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置. 如果要让div-1层向下移动20px,左移40px: example: #div-1

css元素定位

css 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { position:static;} 2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px: example: #div-1 { position

css元素定位_CSS/HTML

css元素定位 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example:#div-1 { position:static;} 2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px: example:#div-1 { positi

浅析CSS——元素重叠及position定位的z-index顺序

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下. 经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序.总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发.   元素

Selenium2.0功能测试之Web元素的定位

页面元素的定位可以说是WebDriver中最核心的内容了,我们定位元素的目的主要有:操作元素,获取该元素的属性,获取元素的text以及获取元素的数量,WebDriver 为我们提供了以下几种方法来帮我们定位web元素: 通过元素的id获取 通过元素的name获取 通过元素的tag name 获取 通过css xpath 获取 通过xpath 获取 通过class name  获取 通过一部分的link text 获取元素 通过全部的link text 获取元素 唯一元素的定位: package

Selenium2.0功能测试之唯一元素的定位

页面元素的定位可以说是WebDriver中最核心的内容了,我们定位一个元素的目的主要有:操作元素,获取该元素的属性,获取元素的text以及获取元素的数量,WebDriver 为我们提供了以下几种方法来帮我们定位一个web元素: 通过元素的id获取 通过元素的name获取 通过元素的tag name 获取 通过css xpath 获取 通过xpath 获取 通过class name  获取 通过一部分的link text 获取元素 通过全部的link text 获取元素 package org.c

常用CSS元素div ul dl dt ol的简单解释

css 几个css元素的简单解释 div ul dl dt oldiv,这个很常见,块级元素,div尽量少用,和table一样,嵌套越少越好 ol  有序列表. <ol>  <li>--</li>  <li>--</li>  <li>--</li></ol> 表现为: 1--2--3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul><li>--</li><

一个CSS元素同时有多个类选择器的例子

一个元素可以同时有多个类选择器.注意,多个类选择器有冲突时,在Css文件里最后写的那个类选择器优先级最高. 在下面的例子中,<div>有cls1和cls2两个类选择器,注意其写法,需要在一个class标识符内按顺序用空格隔开写. 例: html文件: <html> <head> <title>一个元素同时有多个类选择器</title> <link rel="stylesheet" type="text/css&

一个CSS元素同时有id选择器和类选择器的例子

一个元素可同时有id选择器和类选择器,但只能有一个id选择器,且id选择器的优先级大于class选择器. 例: html文件内容: <html> <head> <title>一个元素可同时有id选择器和类选择器</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body&