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

Question

I have a rectangle image and a circular image.我有一个矩形图像和一个圆形图像。 The rectangle image needs to be 10em lower because of a banner image at the top.由于顶部的横幅图像，矩形图像需要低 10em。 Half of the circle needs to be inside the rectangle and the other half outside the rectangle.圆的一半需要在矩形内，另一半在矩形外。 The center of the circle needs to be somewhat near with midpoint of the baseline of the rectangle.圆心需要稍微靠近矩形基线的中点。

Then the page has a bunch of texts on it.然后页面上有一堆文本。 So, the circle needs to be relative to the rectangle but not the rest of the page.因此，圆圈需要相对于矩形而不是页面的 rest。 How would I accomplish that using CSS?我将如何使用 CSS 实现这一目标？ This div literally shows above the image.这个 div 从字面上显示在图像上方。

If I put a div or section around it messes with the layering.如果我在它周围放置一个 div 或部分，就会弄乱分层。 What am I missing?我错过了什么？ (Also only CSS and HTML can be used) （也只能使用 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>

Answer 1

Can you please check the below code?你能检查下面的代码吗？ Hope it will work for you.希望它对你有用。 We have used transform: translate(-50%, -50%);我们使用了transform: translate(-50%, -50%); and position: absolute;和position: absolute; to solved your problem.解决你的问题。

 #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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-18 05:03:29

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-18 05:03:29

解决方案1
1 已采纳 2021-03-18 05:03:29