• 技术文章 >web前端 >css教程

    CSS中如何使div覆盖另一个div的实例

    黄舟黄舟2017-07-22 10:44:07原创3305
    将一个p覆盖在另一个p上有两种手段:一是设置margin为负值,二是设置绝对定位。

    可以根个人情况设置z-index的值

    1->position 为absolute的情况

    <html>
    <head>
    <style>
    #p1{position:absolute;width:300px;height:300px;background:#ccc;}
    #p2{position:absolute;left:0;top:0;width:200px;height:200px;background:red;filter:alpha(opacity=50);}
    </style>
    </head>
    <body>
    <pid="p1">这里是p1的内容
              <pid="p2"></p>
    </p>
    </body>
    </html>


    2->用margin为负的操作

    <html>
    <head>
        <style>
       #p1 {position:relative; width:300px; height:300px;background:#ccc;}
        #p2 {position:relative; left:0; top:0;margin-top:-15px;width:200px; height:200px; background:red;filter:alpha(opacity=50);}
        </style>
    </head>
    <body>
    <pid="p1"> 这里是p1的内容
              <pid="p2"></p>
    </p>
    </body>
    </html>

    以上就是CSS中如何使div覆盖另一个div的实例的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:样式表 css 另一个
    上一篇:css中类选择器是如何使用的实例详解 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 实例详解CSS渐变锯齿问题如何解决!• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网