定位-相对定位

番茄西红柿发布于2019-04-23 13:24 / 1978人阅读

摘要：定位输出定位将指定的元素摆放到页面的任意位置可以通过属性来设置元素的定位输入输出元素没有移动，为默认值相对定位输出当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化输入偏移量，，，，一般选择水平方向的



  
    
    定位

　　输出：

定位：将指定的元素摆放到页面的任意位置

可以通过position属性来设置元素的定位

输入static：

  .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: static;
      }

输出：元素没有移动，static为默认值

relative：相对定位

.box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
      }

输出：当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

输入偏移量（left，right，top，bottom，一般选择水平方向的一个偏移量和垂直方向的一个偏移量进行定位就可以）：

      .box2{
        width:100px;
        height: 100px;
        background-color: rgb(231, 223, 143);
        position: relative;
        left: 50px;
        top: 100px;
      }

输出：1、相对定位 relative 是相对于元素在文档流中原来的位置进行定位

2、相对定位会使元素上升一个层级

　　　 3、相对定位的元素不会脱离文档流

插入一个内联元素：

      span{
        background-color: rgb(209, 198, 209);
        position: relative;
      }

    span元素

输出：相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素

服务器托管私有云相对定位-绝对定位相对定位相对定位自适应人脸定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1815.html

构建静态页面之 [ 定位 ]

摘要：定位属性表示设置定位绝对定位固定定位相对定位绝对定位表示设置绝对定位绝对定位的注意设置绝对定位后，当前元素脱离文档流如果指定元素的父级元素是元素该元素就是相对于当前页面的定位如果指定元素的父级元素不是元素，父级元素没有开启定位该元素就定位 position属性表示设置定位绝对定位固定定位相对定位绝对定位 position : absolute - 表示设置绝对定位...

bingchen 2019-08-29 16:31 评论0 收藏0
构建静态页面之 [ 定位 ]

摘要：定位属性表示设置定位绝对定位固定定位相对定位绝对定位表示设置绝对定位绝对定位的注意设置绝对定位后，当前元素脱离文档流如果指定元素的父级元素是元素该元素就是相对于当前页面的定位如果指定元素的父级元素不是元素，父级元素没有开启定位该元素就定位 position属性表示设置定位绝对定位固定定位相对定位绝对定位 position : absolute - 表示设置绝对定位...

ISherry 2019-08-02 16:31 评论0 收藏0
CSS详细解读定位

摘要：有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。我的回答是相对自己文档流中的原始位置定位。这里就不解释脱离文档流的问题，主要研究它的定位问题。一前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。二正文 1.文档流布局的概念将窗体自上而下分成一行行，并在每行中按从左至右的...

1treeS 2019-08-30 14:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0
CSS相对定位和绝对定位

摘要：三绝对定位拼爹型绝对定位不占有位置。父级有定位绝对定位是将元素依据最近的已经定位绝对固定或相对的父元素祖先进行定位。绝对定位的盒子水平垂直居中普通盒子左右居中用即可，但对于绝对定位的就无效了。为什么要学定位定位是CSS中的难点和重点，特别是后面学javascript特效时候，比如实现下拉菜单、弹框等，要盖住下面内容又不会影响下面内容，比如要超出盒子一部分，比如屏幕中有一个小弹窗飘来...

xinhaip 2019-08-30 15:54 评论0 收藏0