美文网首页
设置1个div 浮在另一个上方

设置1个div 浮在另一个上方

作者: 谢小帅 | 来源:发表于2018-08-20 12:58 被阅读28次

原理:子 div 以 relative 的方式浮动在父 div 上方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV 浮动</title>

    <style>
        .below {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background: #999;
        }

        .above {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #F00;
            background: #FFF;
            z-index: 1;
        }
    </style>

</head>
<body>

<div>
    <div class="below">
        我浮动在下面,你只能看到这些
    </div>
    <div class="above">
        我浮动在上面
    </div>

</body>
</html>
效果图

相关文章

  • 设置1个div 浮在另一个上方

    原理:子 div 以 relative 的方式浮动在父 div 上方。

  • h1

    div (0) div /div (1)设置了float div /div (2)设置了f...

  • DIV的值

    1、Height:设置DIV的高度; 2.Width:设置DIV的宽度。 3、margin:用于设置DIV的外延边...

  • offset client scroll screen关键

    offset div.offsetTop 指div距离上方或上层控件的位置,整型,单位像素。 div.offset...

  • 「PPT疗程」 文字浮在图片上方

    小心思出奇迹... 今天分享的这个小技巧让文字浮在图片上方,操作简单而且有相当的美感,让文字穿透图片显现出来,有点...

  • CSS布局

    布局 左右布局 左侧 DIV 设置 float 属性为 left,右侧 DIV 设置 margin-left 属性...

  • div 左边定宽,右边自适应

    方法一: div1 设置浮动,div2设置margin-left:第一个div的宽度。代码如下: 方法二 : 浮动...

  • 如何让div中的图片垂直居中

    方法一: 给div设置text-align:center;可使图片水平居中;给div设置 display: tab...

  • css3(2)

    垂直对齐 外层的div需要设置:display:table内容的div设置:(1)display:table-ce...

  • css布局

    1.左右布局 左侧 div 设置 float 属性为 left,右侧 div 设置 margin-left 属性等...

网友评论

      本文标题:设置1个div 浮在另一个上方

      本文链接:https://www.haomeiwen.com/subject/pyakiftx.html