快捷搜索:

CSS_元素的定位

网页布局的核心就是定位,在CSS中我们用position属性为元素进行定位,对元素应用了这个属性之后,可以改变它在常规文档流中的位置!

position属性有4个值:

static

relative

fixed

 

以下是我们的模版HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>网页元素的定位</title>
    <meta charset="utf-8">
    <link href="positionstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>宣室求贤访逐臣,</p>
<p >贾生才调更无伦。</p>
<p>可怜夜半虚前席,</p>
<p>不问苍生问鬼神。</p>
</body>
</html>
 
在不添加任何样式的情况下,即默认采用的静态定位方式,显示效果如下
 
 

采用相对定位 relative

现在我们想让第二句“贾生才调更无伦”用相对定位方式,这里的相对定位是指:它相对于原来的位置即static位置。

现在添加如下样式:

这段代码设置了p边框为1px 宽度为200px,并且删除了内边距和外边距

显示后的效果如下

现在我们让第二段向右移动200px的位置




运行效果

可以看出它的位置是相对于原来的位置在变动。它只是挪动了一下,它原来的空位置还在。而其他元素也没有任何变化!!

采用绝对定位  absolute

把position属性值改为absolute即将定位方式改为了,绝对定位方式了。这里绝对定位:是指对于body进行定位,这也是默认的定位上下文

运行效果

可以看出采用绝对定位方式之后,元素原来的位置被它下面的元素所占用

 

 

采用固定定位 fixed

固定定位和绝对定位很相似,绝对定位的定位元素是上下文,而固定定位的元素是浏览器窗口,所以它不会随着页面的滚动而移动

 

 

http://www.bkjia.com/HTML_CSS/441278.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/441278.htmlTechArticle网页布局的核心就是定位,在CSS中我们用position属性为元素进行定位,对元素应用了这个属性之后,可以改变它在常规文档流中的位置!...

本文源自: AG88环亚

您可能还会对下面的文章感兴趣: