position属性

position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。

position:static;

默认情况下，HTML元素定位为静态。静态定位元素不受top，bottom，left和right属性的影响。 元素position:static;没有以任何特殊方式定位; 它总是根据页面的正常流程定位：

这个<div>元素的position:static;
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css</title>

    <style>

        div.static {

            position: static;

            border: 3px solid #73AD21;

        }

    </style>

</head>

<body>

<h2>position: static;</h2>

<p>一个位置为position:static; 没有任何特殊的定位; 它是始终根据页面的正常流程定位：</p>

<div class="static">

    这个div元素的位置为：static;

</div>

</body>

</html>

position:relative;

具有position:relative;相对于其正常位置定位的元素。设置相对定位元素的top，bottom，left和right属性将使其远离其正常位置进行调整。其他内容不会被调整以适应元素留下的任何空白。

这个<div>元素的position:relative;
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css</title>

    <style>

        div.relative {

            position: relative;

            left: 30px;

            border: 3px solid #73AD21;

        }

    </style>

</head>

<body>

<h2>position: relative;</h2>

<p>position:relative的元素; 相对于其正常位置定位：</p>

<div class="relative">

    这个div元素有position: relative;

</div>

</body>

</html>

position:fixed;

元素position:fixed;相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top，bottom，left和right属性用于定位元素。固定元素不会在页面中留下通常位于其中的间隙。注意页面右下角的固定元素。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css教程（jc2182.com）</title>

    <style>

        div.fixed {

            position: fixed;

            bottom: 0;

            right: 0;

            width: 300px;

            border: 3px solid #73AD21;

        }

    </style>

</head>

<body>

<h2>position:fixed;</h2>

<p>position:fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置：</p>

<div class="fixed">

    这个div元素有position: fixed;

</div>

</body>

</html>

position:absolute;

具有position:absolute;相对于最近定位的祖先定位的元素（而不是相对于视口定位，如fixed）。然而; 如果绝对定位元素没有定位祖先，它将使用文档正文，并随页面滚动一起移动。 注意： “定位”元素的位置是除了static之外的任何元素。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css教程（jc2182.com）</title>

    <style>

        div.relative {

            position: relative;

            width: 400px;

            height: 200px;

            border: 3px solid #73AD21;

        }

        div.absolute {

            position: absolute;

            top: 80px;

            right: 0;

            width: 200px;

            height: 100px;

            border: 3px solid #73AD21;

        }

    </style>

</head>

<body>

<h2>position: absolute;</h2>

<p>position:absolute;的元素; 相对于最近定位的祖先定位（而不是相对于视口定位，如fixed）：</p>

<div class="relative">这个div元素有 position: relative;

    <div class="absolute">这个div元素有 position: absolute;</div>

</div>

</body>

</html>

position:sticky;

position:sticky;根据用户的滚动位置定位元素。粘性元素在relative和之间切换fixed，具体取决于滚动位置。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如位置：fixed）。

注意： Internet Explorer，Edge 15及更早版本不支持粘性定位。Safari需要-webkit-前缀（参见下面的示例）。您还必须指定的至少一个top，right，bottom或left为粘稠的定位工作。

在此示例中，top: 0当您到达其滚动位置时，粘性元素会粘到页面顶部。

<!DOCTYPE html>

<html>

<head>

    <style>

        div.sticky {

            position: -webkit-sticky;

            position: sticky;

            top: 0;

            padding: 5px;

            background-color: #cae8ca;

            border: 2px solid #4CAF50;

        }

    </style>

</head>

<body>

<p>尝试在此框架内<b>滚动</b>以了解粘性定位的工作原理。</p>

<p>注意：IE/Edge15及更早版本不支position: sticky;。</p>

<div class="sticky">我很粘!</div>

<div style="padding-bottom:2000px">

    <p>在此示例中，当您到达其滚动位置时，粘性元素会粘到页面顶部（顶部：0）。</p>

    <p>向上滚动以消除粘性。</p>

    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</div>

</body>

</html>

在线体验一下达到其滚动位置

所有CSS定位属性

属性 描述
bottom 设置定位框的底部边缘
clip 剪辑一个绝对定位的元素
left 设置定位框的左边缘
position 指定元素的定位类型
right 设置定位框的右边缘
top 设置定位框的上边缘
z-index 设置元素的堆栈顺序
 

css position 5种不同的值的用法的更多相关文章

  1. css position 几种定位

    绝对定位:position:absolute 绝对定位使元素的位置与文档流无关,因此不占据空间. 绝对定位的元素的位置相对于最近的已定位祖先元素(absoulte.relative),如果元素没有已定 ...

  2. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. css的五种属性值----在路上（21）

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  5. 在HTML页面布局中,position的值有几种,默然的值是什么

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  7. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

  8. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  9. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

随机推荐

  1. 「SAP技术」SAP MM 事务代码ME17的用法

    SAP MM 事务代码ME17的用法 1,如下采购信息记录需要被归档: PIR号码,5300007816   2, ME12打上删除标记,   3, 事务代码ME17做归档 3.1 创建archive ...

  2. VectorMap.js 矢量地图库 – 快速入门

    VectorMap.js是一个开源地图渲染JavaScript库, 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 (包括“矢量瓦片地图”,一般性矢量数据地图)和 栅格瓦片地图的渲染. W ...

  3. 微服务：Eureka+Zuul+Ribbon+Feign+Hystrix构建微服务架构

    原文地址:http://blog.csdn.net/qq_18675693/article/details/53282031 本案例将打架一个微服务框架,参考来源官方参考文档 微服务:是什么?网上有一 ...

  4. Mac遇到挖矿程序的应急方法

    Mac遇到挖矿程序应急的方法 工作笔记:   1.起因:监控发现jsonrpc挖矿报警,询问当事人描述当时情况是安装了sketch软件.   网上可以定位到该IOC   运行后该IOC流量依然可以观测 ...

  5. 自定义MVC三

    完成t_mvc_book表的增删改查1.通用分页的jar.自定义mvc框架.自定义标签 导入jar.导入之前写好的pageTag.自定义mvc.xml pageTag private static f ...

  6. 21.Java基础_String类

    String类构造方法 package pack1; //推荐使用直接赋值的方式得到字符串 public class test { public static void main(String[] a ...

  7. [C3W1] Structuring Machine Learning Projects - ML Strategy 1

    第一周:机器学习策略(1)(ML Strategy(1)) 为什么是ML策略?(Why ML Strategy) 大家好,欢迎收听本课,如何构建你的机器学习项目也就是说机器学习的策略.我希望通过这门课 ...

  8. 牛客小白月赛18 Forsaken给学生分组

    牛客小白月赛18 Forsaken给学生分组 Forsaken给学生分组 链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 ​ Forsaken有 ...

  9. 校园邮箱注册jetbrains全家桶遇到的问题

    校园邮箱怎么注册jetbrains账号,百度就可以,发两次邮件 我遇到的问题: 1.登录时出现connection refused 因为之前都是破解使用,所以修改过hosts文件,添加了“0.0.0. ...

  10. Zuul中聚合Swagger的坑

    每个服务都有自己的接口,通过Swagger来管理接口文档.在服务较多的时候我们希望有一个统一的入口来进行文档的查看,这个时候可以在zuul中进行文档的聚合显示. 下面来看下具体的整合步骤以及采坑记录. ...