时间戳

首页 > 解决方案 > css中有没有办法让一个div漂浮在另一个div上但向下滚动时不漂浮

html - css中有没有办法让一个div漂浮在另一个div上但向下滚动时不漂浮

问题描述

我有一个矩形图像和一个圆形图像。由于顶部的横幅图像，矩形图像需要低 10em。圆的一半需要在矩形内，另一半在矩形外。圆心需要稍微靠近矩形基线的中点。

然后页面上有一堆文本。因此，圆圈需要相对于矩形而不是页面的其余部分。我将如何使用 CSS 实现这一点？这个 div 从字面上显示在图像上方。

如果我在它周围放置一个 div 或部分，就会弄乱分层。我错过了什么？（也只能使用 CSS 和 HTML）

<style type="text/css">
    #outer{
    position:fixed;
    top:12em;
    left:0;
    width:80%;
    height:400px;
    margin-left:10%;
    margin-right:10%;
    background-image: url(SOMEURL);
    }
    #inner{
        width: 300px;
        height: 300px;
        top: 300px;
        margin: 0;
        position: relative;
        background-image: url();
        background-size: cover;
        display: block;
        border-radius: 300px;
        -webkit-border-radius: 300px;
        -moz-border-radius: 300px;
    }
  </style>

<center>
  <div id=outer class="rectangle-Image-bg">
    <div id=inner >
    </div>
  </div>
<div>Some text here
<div>
</center>

标签： htmlcss

解决方案

你能检查下面的代码吗？希望它对你有用。我们已经使用transform: translate(-50%, -50%);并position: absolute;解决了您的问题。

#outer {
  position: relative;
  width: 600px;
  height: 400px;
  background-image: url("https://dummyimage.com/600x400/000/fff");
  background-repeat: no-repeat;
  margin-bottom: 160px;
}

#inner {
  width: 300px;
  height: 300px;
  top: 300px;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  background-image: url("https://dummyimage.com/600x400/ada4ad/fff");
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  border-radius: 300px;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
}
<head>
  <meta charset="UTF-8">
  <title>lorem</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="nav.css" type="text/css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <center>
    <div id=outer class="rectangle-Image-bg">
      <div id=inner>
      </div>
    </div>
    <div>Some text here
      <div>
  </center>

  </div>

推荐阅读