• 技术文章 >web前端 >css教程

    css中定位属性是哪个

    长期闲置长期闲置2021-12-14 10:30:50原创465

    在css中,定位属性是“position”属性;当属性的值为“absolute”时元素绝对定位,当属性的值为“fixed”时元素固定定位,当属性的值为“relative”时元素相对定位,当属性的值为“relative”时元素默认没有定位。

    本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

    css中定位属性是哪个

    在css中,元素的定位属性是position。

    position属性的作用就是规定元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

    其中属性值如下:

    07.png

    相对定位示例如下:

    <html>
    <head>
    <style type="text/css">
    h2.pos_left
    {
    position:relative;
    left:-20px
    }
    h2.pos_right
    {
    position:relative;
    left:20px
    }
    </style>
    </head>
    <body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
    </body>
    </html>

    输出结果:

    08.png

    固定定位示例如下:

    <html>
    <head>
    <style type="text/css">
    p.one
    {
    position:fixed;
    left:5px;
    top:5px;
    }
    p.two
    {
    position:fixed;
    top:30px;
    right:5px;
    }
    </style>
    </head>
    <body>
    <p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>
    </body>
    </html>

    固定定位会使元素相对于浏览器窗口进行固定。

    绝对定位示例如下:

    <html>
    <head>
    <style type="text/css">
    h2.pos_abs
    {
    position:absolute;
    left:100px;
    top:150px
    }
    </style>
    </head>
    <body>
    <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
    </body>
    </html>

    输出结果:

    09.png

    (学习视频分享:css视频教程

    以上就是css中定位属性是哪个的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css字体大小单位可以是em吗 下一篇:css怎样实现图片出现一秒后消失效果
    PHP编程就业班

    相关文章推荐

    • css怎样改变ul中li的间距• css怎样将无序列表前的点去掉• css怎样不让复制页面内容• css怎样去掉li元素默认样式• css字体大小单位可以是em吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网