z-index --- z-axis position:static --- does not work

/* z-index --- z-axis
position:static --- does not work
*/



INDEX.HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>    
    <link rel="stylesheet" href="styles.css">

   
</head>
<body >
    <div class="banner">
        <img src="./iceland - 副本.jpg" class="one" alt="">
        <img src="./detox.jpg" class="two" alt="">
        <img src="./highway.jpg" class="three" alt="">
    </div>
</body>
</html>

CSS:

/* z-index --- z-axis
position:static --- does not work
*/


img {
    width: 100px;
    height: 100px;
    position: absolute;
}

.banner {
    margin: 20px;
    width: 70vw;
    height: 70vh;
    position: relative;    
    border: 5px solid red;
}
.one {
    top: 0;
    left: 0;
    position: relative;
    z-index: -3;
}
.two {
    top: 10%;
    left: 10%;
    z-index: -1;
}
.three {
    top: 20%;
    left: 20%;
    z-index: -2;
}

 

评论

发表评论

此博客中的热门博文

通过Graphql成功地查询Contentful，以便在我的gatsby项目中访问和显示图像

  使用 gatsby-image （v2） import * as React from "react" import { graphql } from "gatsby" import Img from "gatsby-image" function MainApp( {data} ){ return( <h1> {data.allContentfulHeroImage.edges.map(({ node },index) => <Img fluid={node.heroImage.fluid} alt = {``} key = {``} />)} </h1> ) } export default MainApp; export const query = graphql` query MyQuery { allContentfulHeroImage {  edges { node { heroImage { fluid (maxWidth:2000){ ...GatsbyContentfulFluid } } } } } }` 使用 gatsby-plugin-image （v3） import * as React from "react" import { graphql } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" function MainApp( {data} ) {   return (     <>         {data.allContentfulHeroImage.edges.map(({ node }, index) => <GatsbyImage image={node.heroImage.gatsbyImageData} alt={``} key={``} />)}     </>   ) } export defau...
阅读全文

Oracle忘了保存,Oracle Cloud甲骨文云服务器忘记SSH秘钥或未设置Public key的解决办法...

图片
  很多人创建实例对设置秘钥可能存在一些问题，导致后面服务器连接不上，下面是修改重置已创建服务器但是ssh登录不上的解决办法。 前期准备 1、 秘钥 对 这里以 Xshell 为例，菜单栏->工具->新建秘钥向导，下一步下一步生成公钥和私钥，可以将它们全部导出成文件。 2、创建一台新的实例，东京韩国现在应该没有资源了，可以创建一个收费的实例 如图示所示的实例配置就是收费，不带mirco后缀 3、Xshell使用上面的私钥opc用户登录已经创建的这台服务器，sudo -i可以切换root用户，供后面使用 重置登录不上服务器秘钥 1、停止之前登录不上的终免服务器，Tips：注意是停止服务器，不是终止！！！待会还需要启动 2、分离这台服务器的引导卷，停止服务器后，可以在下面分离引导卷，稍后会将这台服务器挂载到上面我们已经创建的收费服务器进行秘钥修改。 3、切换至收费服务器的细节页面，将已经分离的引导卷重新附加到收费服务器 4、点击附加后的选项查看iSCSI命令 5、切换到Xshell收费服务器控制台，依次执行上图中红框命令，执行： fdisk -l /dev/sdb 如果查看到磁盘信息，应该就已经附加成功。 6、挂载、执行如下命令 sudo mount -o nouuid /dev/sdb3 /mnt 如果此步报错，执行： sudo mount /dev/sdb3 /mnt 7、如果到了这一步，即将就ok了，修改 公钥 ，继续执行 sudo vi /mnt/home/opc/. ssh /authorized_keys 键盘按两次d可以删除已有秘钥，按i键进入编辑，将上面准备的公钥文件内容，记住是公钥，全部粘贴到里面，注意空格和换行，按ESC->按住shift+两次z键，保存退出 8、解除挂载，执行命令 sudo umount /mnt 9、执行下图红框中命令，分离引导卷 10、网页操作界面分离 11、重新将这个卷挂载到终免服务器上，然后启动服务器，这样就可以使用刚刚上面生成的私钥登录这台服务器了，至此ssh秘钥修改完毕 如果细节上有什么问题可以在下面留言。 参考oracle官方文档：https://blogs.oracle.com/cloud-infrastructure/recovering-opc-user-ssh-key-on-oracl...
阅读全文

国外免费虚拟主机主要搭建网站

  一    概述：         本文讲述外国的免费主机，免费虚拟主机，能用的，可以注册的。国外免费主机freehostingeu，国外免费主机freehostia，国外免费主机freehosting，国外免费主机pantheon，国外免费主机freewebhostingarea，国外免费主机byethost，国外免费主机awardspace，国外免费主机infinityfree，国外免费主机000webhost。国外免费主机个人使用体验和感受说明。本文编写于2021年11月，实测于2021年10月。   个人说明：都是本人亲测的，有不详细的，请自己评鉴。   二   参数及个人使用   （一）    国外免费主机freehostia 1.地址： 永久免费虚拟主机freehostia官网： https://www.freehostia.com/ 2.参数： 5 个托管域 免费二级域名 250MB 磁盘空间 50MB备份容量 6GB 月流量 1 MySQL v.5 数据库，10MB MySQL 存储 3 个电子邮件帐户 3.说明： 注册时需要梯子，不然提交注册的按钮前一个谷歌的验证码不能加载，最大上传文件2MB。 4.使用感受： 这是我在这几个免费主机中打开首页最快的，闲时4秒内，忙时8秒内。这几个免费主机中功能最齐全的。可以自构建网站，也可以一键部署。最终还是没有使用，主要是数据库空间太小。   （二）    国外免费主机freehosting 1.地址： 国外免费虚拟主机freehosting官网： https://freehosting.com/free-hosting.html 2.参数： 1个托管网站 无限带宽 10GB存储空间 1个电子邮件帐户 1 MySQL 数据库 没有子域 3.说明： 必须注册新域名或者绑定自己的域名，ssl功能必须付费，最大上传文件512MB。有一键部署。 4.使用感受： 网页加载速度很快，但是视频文件不加速。没有SSL!!!   （三）    国外免费主机pant...
阅读全文