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>
     
     
     
     

     

     
  • 相关阅读:
    Solr&SpringDataSolr
    Redis简单介绍与使用
    ueditor文本编辑器
    FastDFS
    Vue.js快速入门
    分布式架构Duboo+Zookeeper的基础使用
    Linux基本操作&&Linux操作MySQL
    23种设计模式之代理模式(动态代理)
    23种设计模式之代理模式(静态代理)
    MongoDB入门培训 | 8周入门NoSQL No.1数据库
  • 原文地址:https://www.cnblogs.com/liuyuancheng/p/7252649.html
Copyright © 2011-2022 走看看