zoukankan      html  css  js  c++  java
  • css之position

    position:规定元素的定位类型

    主要有以下三种类型:

      fixed:生成绝对定位元素,相对于浏览器窗口而言的,即不管浏览器窗口大小如何变化,元素始终位于浏览器的固定位置。

          不管是否有父div,它的位置始终是浏览器的绝对位置

      元素位置可以通过:top,bottom,left,right来定位

    css代码

    div{
        height: 500px;
         500px;
        background-color: #303a40;
    }
    p{
        position: fixed;
        top:30px;
        right: 30px;
    }
    

      html代码

    <head>
        <meta charset="UTF-8">
        <title>CSS测试</title>
        <link rel="stylesheet" type="text/css" href="ctest.css">
    </head>
    <body>
    <body>
       <div >
           <p>绝对位置</p>
       </div>
    </body>
    </body>
    

      效果图:

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

        元素位置可以通过:top,bottom,left,right来定位

    css代码

    div{
        height: 500px;
         500px;
        background-color: #303a40;
    }
    p{
        position: absolute;
        top:30px;
        right: 30px;
    }
    

      html代码同上

    效果图:

      relative:生成相对定位元素,其是相对于其正常位置而言的

        属性:

          left 30px:相对于正常位置左侧填充30px;

          top 30px:相对于正常位置上侧填充30px;

    css代码:

    div{
        height: 500px;
         500px;
        background-color: #303a40;
    }
    p{
        position: relative;
        left:600px;
        top:100px;
    }
    

      html代码

    <head>
        <meta charset="UTF-8">
        <title>CSS测试</title>
        <link rel="stylesheet" type="text/css" href="ctest.css">
    </head>
    <body>
    <body>
       <div >
           <p>相对位置</p>
       </div>
        <div style="height: 1000px;background-color: #656565"></div>
    </body>
    </body>
    

      效果图:

    现象:

      当absolute遇见了relativ会怎么样?

    css代码:

    div{
        height: 500px;
         500px;
        background-color: #303a40;
        position: relative;
        left:100px;
    }
    p{
        position: absolute;
        right: 20px;
        top:20px;
    }
    

      html代码

    <head>
        <meta charset="UTF-8">
        <title>CSS测试</title>
        <link rel="stylesheet" type="text/css" href="ctest.css">
    </head>
    <body>
    <body>
       <div >
           <p>绝对位置</p>
       </div>
        <div style="height: 1000px;background-color: #656565"></div>
    </body>
    </body>
    

      效果图

  • 相关阅读:
    网卡工作状态检测
    Soap/Web Service执行效率的思考
    Soap/Web Service执行效率的思考
    判断一个字符是否为汉字的最佳方法[转]
    Kafka数据可靠性深度解读
    HTTP 5XX代码理解
    图解:原来这就是网络
    架构设计原则
    Kafka
    Nginx 之 proxy_pass详解
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6122774.html
Copyright © 2011-2022 走看看