zoukankan      html  css  js  c++  java
  • css样式学习7

    绝对定位

    采用绝对定位的元素,会寻找离他最近的采用了定位的父元素,并以他为坐标进行定位,如果所有的父元素都没有使用定位,则以body为坐标进行定位,并且元素占用的空间会被其他元素占用

    以下是代码实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            #left,#center,#right{
                float: left;
            }
            #left{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #center{
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: absolute;
                top: 30px;
                left: 30px;
            }
            #right{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
        <title>绝对定位</title>
    </head>
    <body>
    
    <div style="position: relative;top: 100px;left: 100px" >
        <div>
            <div>
                <div id="left"></div>
                <div id="center"></div>
                <div id="right"></div>
            </div>
        </div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    C++常用工具收集
    Ubuntu禁用触摸板
    Vim简本
    JS原型链模式和继承模式
    JS原型链模式
    JS中的单例模式/工厂模式/构造函数模式(并非完全意义上的设计模式)
    JS中一道关于this和闭包的题
    JS中的this关键字
    JS闭包
    JS作用域和作用域链
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252648.html
Copyright © 2011-2022 走看看