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

    相对定位
    采用相对定位的元素,会相对于他原来的位置进行定位,
     并且元素原始占用位置不会被其他元素占用
    以下是代码实现:
    <!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: relative;
                top: 30px;
                left: 30px
                z-index: -1;
            }
            #right{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
        <title>相对定位</title>
    </head>
    <body>
    
    <div>
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
    </body>
    </html>
     
     
     
     

     

     
  • 相关阅读:
    网络协议分析-ICMP协议分析
    网络协议分析-IP协议分析
    网络协议分析-ARP协议分析
    网络协议分析-Ethernet
    Centos7 _dns服务器搭建及配置
    centos7_vsftpd-ssl/tls搭建及ftp加固
    HTTP请求的六种方式
    Winserver03-Web SSL服务搭建
    webstorage和cookie的区别
    sessionstorage和localstorage的区别
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252649.html
Copyright © 2011-2022 走看看