文档章节

css定位

Akillua
 Akillua
发布于 2017/07/27 10:55
字数 192
阅读 5
收藏 0

css定位及z-index的使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css定位</title>
    <style>
        /*z-index数越大越靠顶层,数越小越靠底层*/
        #div1{
            width:200px;
            height:200px;
            background: rebeccapurple;
            position:absolute;
            top:20px;
            z-index: 2;
        }
        #div2{
            width:200px;
            height:200px;
            background:black;
            position:relative;
            left:20px;
            z-index: 1;
        }
        #div3{
            width:200px;
            height:200px;
            background:darkred;
            position:relative;
            left:30px;
            top: -80px;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <script>
        <!--显示从1到99上下排列-->
        for( var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

z-index可取负值,负值越大表示越靠底层:

<html>
<head>
    <style type="text/css">
        body{
            color:red;
        }
        img
        {
            position:absolute;
            top:0;
            left:0;
            z-index: -1;
        }
    </style>
</head>

<body>
<h1>This is a heading</h1>
<img src="../../image/1.gif" />
<p>由于图像的 z-index 是 -1,因此它在文本的后面出现。</p>
</body>
</html>

 

© 著作权归作者所有

下一篇: css动画过渡
Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问

暂无文章

如何远程调试部署在CloudFoundry平台上的nodejs应用

网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等。 在实际情况中,我们可能遇到本地运行良好,但是部署到C...

JerryWang_SAP
21分钟前
0
0
微信扫码访问网站调用默认浏览器打开如何实现?

我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 “ 已停止访问该网页 ”,无论是聊天框也一样。说是系统检测到您的网...

明尼苏达哈士奇
29分钟前
1
0
一份Java程序员进阶架构师的秘籍,你离架构师还差多远

一、如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理。jvm虚拟机原理、调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并...

我最喜欢三大框架
37分钟前
0
0
想说再见不容易,win7最新市占率依然超36%

微软正在通过努力让Windows 7用户升级至Windows 10,不过从目前的市占率来看,他们还是要加把劲了。 据最新的市场份额看,Windows 10在本月的市场份额有所提升,从43.62%增长到44.10%。另一...

linuxCool
49分钟前
4
0
SQL的优化

对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 对查询进行优化,要尽量避免全表扫描,首先应考虑在进行条件判断的字段上创建了索引。 应尽量避...

咸鱼-李y
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部