zoukankan      html  css  js  c++  java
  • position

    当两个元素同时设置,position属性,后写的元素会覆盖先写的。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>博客</title>
    <style>
    .pre{
           width:500px;
           height:500px;
           position:relative;
           }
    .test1{
            width:100px;
            height:100px;
            position:absolute;
            top:100px;
            background:black;
            }
        .test2{
            width:100px;
            height:100px;
            position:absolute;
            top:50px;
            background:blue;
            }
    </style>
    </head>
    
    <body>
    <div class="pre">
    <div class="test1"></div>                              
    <div class="test2"></div>
    <div>
    </body>              
    </html>

    如图所示,后写的蓝色覆盖了先写的黑色部分。这是因为默认的层级关系,文档中后写的层级大于先写的。

    2.Position:fixed;不受制于父元素。固定于页面的相应位置。

    <style>
    .pre{
           width:300px;
           height:300px;
           position:absolute;
           top:200px;
           left:300px;
           background:black;
           }
        .test2{
            width:100px;
            height:100px;
            position:fixed;
            top:50px;
            background:blue;
            }
    </style>
    </head>
    
    <body>
    <div class="pre">
    <div class="test2"></div>
    <div>

    3.position:inherit;

  • 相关阅读:
    迪杰斯特拉算法简单分析
    华科机考:二叉排序树(改)
    华科机考:八进制
    华科机考:阶乘
    华科机考:找位置
    华科机考:回文字符串
    华科机考:a+b
    华科机考:N阶楼梯上楼
    华科机考:大整数排序
    iOS 适配iOS9
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/8094604.html
Copyright © 2011-2022 走看看