CSS基础-​position

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-​position

position是规定元素的定位类型属性,它的值有absolute、relative、fixed、static(static)、inherit。需要注意的是,绝对定位absolute和固定定位fixed元素会隐式地转换为块级元素,而不论该元素本身是什么类型。    

position各属性值的含义如下:

描述

absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

relative生成相对定位的元素,相对于其正常位置进行定位。

生成相对定位的元素,相对于其正常位置进行定位。

fixed生成固定定位的元素,相对于浏览器窗口进行定位。

生成固定定位的元素,相对于浏览器窗口进行定位。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit从父元素继承 position 属性的值。

从父元素继承 position 属性的值。

接下来通过”position-demo.html”看一下各属性值的不同效果。

position-demo.html代码如下:


!DOCTYPE html
html lang="en"
    head
        meta charset="UTF-8"
        titleposition demo/title
        style
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                color: #fff;
                font-size: 30px;
            }
            .parent {
                 /* 关键代码-start */
                position: relative;
                /* 关键代码-end */
                width: 400px;
                height: 400px;
                margin: 100px;
                background-color: #66C9B8;
            }
            .child {
                /* 关键代码-start */
                position: absolute;
                left: 100px;
                top: 100px;
                /* 关键代码-end */
                width: 200px;
                height: 200px;
                background-color: #055F50;
            }
        /style
    /head
    body
        div class="parent"
            span class="child"child/span
        /div
    /body
    script/script
/html

child是absolute绝对定位的元素,自动转为块级元素,相对于有relative相对定位的父元素parent定位。

效果:

CSS基础-​position

child是relative相对定位的元素,相对于原本正常的位置进行定位。

效果:

CSS基础-​position

child是fixed固定定位的元素,自动转为块级元素,相对于浏览器窗口进行定位。

效果:

CSS基础-​position

child是static没有定位的元素,出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

效果:

CSS基础-​position

child从parent继承 position 属性的值“relative”。

效果:

CSS基础-​position

扫描二维码

关注更多精彩

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-​position


  转载请注明: 好好学java CSS基础-​position

 上一篇
CSS基础-块级元素与行内元素 CSS基础-块级元素与行内元素
块级元素是有效有效撑满父元素 行内元素否无效padding有效;margin水平方向有效,竖直方向无效随内部元素的内容变化 行内块级元素否有效有效随内部元素的内容变化 块级元素: 独占一行;元素的宽高、以及内外边距都可设置;元素宽度在不设
2021-04-05
下一篇 
CSS基础-10种居中方法 CSS基础-10种居中方法
10种居中方法如下。从技术角度讲,适用于“水平垂直居中”的方法必然适用于“水平居中”和“垂直居中”的情况;适用于不定宽(高)居中的方法也必然适用于固定宽(高)居中的情况。项目中根据实际需求选用最优最简洁的方法。 以一组demo分别介绍不
2021-04-05