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>
  • 相关阅读:
    十进制,二进制,八进制,十六进制中的相互转换
    oracle中dual表的使用
    弹出窗口
    oracle中的函数
    [导入]几种所见所得的在线编辑器
    操作字符串
    设计模式初认识
    创建型模式之简单工厂模式
    MySQL批量检查表的脚本
    中英文单位对照
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252648.html
Copyright © 2011-2022 走看看