元素的位置属性position
5510字,阅读需时19分钟
来自专栏
课程/专栏

默认情况下,HTML元素在网页的位置是由元素类型(块元素或行元素)以及内容来决定的。浏览器显示HTML网页时,当遇到块元素时,浏览器会将将该元素放置在独立的一行,行的高度由元素内容或元素高度属性决定,该元素后面的内容会被放置在该元素的下方;当遇到行元素时,浏览器会将该元素及后面的行元素都放置在一行,行的高度由最高的那个行元素决定。这样的排版方式称为流式排版。

一般情况下,建议HTML元素都遵循流式排版规则,元素可以在不同的缩放比率间自适应浏览器窗口大小显示。但在有些情况下,处于页面布局需要,需要重新对HTML元素进行页面定位,这就要用到position样式了。position样式可以在页面中定位HTML元素,position样式的设置采用关键字法,关键字有absolute、fixed、relative、static(默认)、inherit。

absolute是绝对定位,相对于body元素的位置来定位,其偏移量可以由样式left、top设置,absolute虽然是绝对定位,但依然会参与到流式排版中,当使用浏览器滚动条滚动内容时,使用absolute定位的元素也会随着滚动;fixed是绝对定位,相对于浏览器窗口进行定位,其偏移量可以由样式left、top设置,使用fixed定位的元素会固定显示在浏览器窗口左上角的偏移位置,不会随内容的滚动而滚动;relative是相对定位,相对于父元素的位置来定位,其偏移量可以由样式left、top设置;static是默认值,没有定位,元素在流式排版中自动定位;inherit从父元素继承 position 样式的值。

例1:使用absolute定位元素的位置

<html>
<head>
      <title>使用absolute定位元素的位置</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">  
           .grad1 {
         height:200px;
                     width:300px;
                     background:radial-gradient(circle,red, yellow,blue);
                     position:absolute;
                     left:100px;
                     top:150px;
           }
         .grad2 {
         height:200px;
                     width:300px;
                     background:radial-gradient(circle,maroon, teal,purple);
                     position:absolute;
                     left:500px;
                     top:150px;
           }
    </style>
</head>
<body>
       <h3>相对于body元素偏移</h3>
       <div></div>
       <div></div>
</boyd>
<html>

在案例代码中,定义了grad1和grad2两个样式,这两个样式都是绝对定位,grad1相对于body元素的偏移量是(100,150),grad2相对于body元素的偏移量是(500,150)。浏览器显示效果如下图所示。

 image.png                                            

例2:使用fixed定位元素的位置

<html>
<head>
      <title>使用fixed定位元素的位置</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">  
           .grad1 {
         height:200px;
                     width:300px;
                     background:radial-gradient(circle,red, yellow,blue);
                     position:fixed;
                     left:100px;
                     top:150px;
           }
         .grad2 {
         height:200px;
                     width:300px;
                     background:radial-gradient(circle,maroon, teal,purple);
                     position:fixed;
                     left:500px;
                     top:150px;
           }
    </style>
</head>
<body>
       <h3>相对于浏览器窗口偏移</h3>
       <div></div>
       <div></div>
</boyd>
<html>

案例2的代码同案例1的代码基本相同,不同的是定位类型是fixed,fixed是相对于浏览器窗口左上角的偏移对元素进行定位,因此使用fixed定位的元素会固定显示在浏览器窗口左上角的偏移位置上,不会随网页内容的滚动而滚动。浏览器显示效果如下图所示。

image.png

例3:使用relative定位元素的位置

<html>
<head>
      <title>使用relative定位元素的位置</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">  
           .grad1 {
         height:200px;
                     width:300px;
                     border:1px solid #e8e8e8;
            }
         .title {
                     width:100%;
                     position:relative;
                     left:30px;
                     top:45px;
           }
    </style>
</head>
<body>
       <h3>相对于父元素偏移</h3>
       <div>
             <div  class="title">相对于父元素偏移(30,45)</div>
       </div>
</boyd>
<html>

在案例代码中,样式为title的div元素是样式为grad1的div元素的子元素,title样式使用了relative相对定位,因此使用title样式的div元素,会被放置在其父元素左上角偏移(30,45)的位置。浏览器显示效果如下图所示。

image.png

 

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有