Question

我的矩形上有一个圆圈，但是我希望圆圈越过矩形的末端，这样一半就在矩形中，另一半在外面。

我怎样才能实现这一目标？

这是我的尝试：

.wrapper-project {
  display: flex;
  flex-direction: column;
}

.project-pill {
  position: relative;
  margin: 0 auto;
  border-radius: 4vw;
  background-color: #DBDDDC;
  width: 25vw;
  height: 35vw;
  overflow: hidden;
  position: relative;
}

.image {
  border-radius: 4vw 4vw 0 0;
  width: 95%;
  padding-top: 2%;
  heigth: 50%;
  margin-left: auto;
  margin-rigth: auto;
}

.content {
  position: absolute;
  width: 100%;
  font-size: 1.7vw;
  height: 100%;
  text-align: center;
  font-family: poppins;
}

.text {
  heigth: 50px;
  width: 95%;
}

.circle {
  width: 35%;
  border-radius: 50%;
  padding-bottom: 35%;
  background-color: red;
  position: absolute;
  bottom: 0;
  /*   padding-top:15px; */
}

<div class="wrapper-project">
  <div class="project-pill">

    <div class="content">

      <img class="image" src="https://www.demaesschalckgoethals.be/files/images/01a59d76ec5642699cdbb254669ed025.jpg" />
      <!--          <div class="image"> -->

      <!--           </div> -->
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat ex id justo rhoncus, a laoreet felis tincidunt. Aenean non enim varius, fringilla ante vitae, lacinia sapien. Sed malesuada orci ut sapien fringilla congue. Fusce sem nisi, laoreet
        quis nibh lobortis, mattis consectetur dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu gravida velit, a pellentesque nisi.
      </div>
    </div>
    <div>
      <div class="circle"></div>
    </div>

View on JSFiddle

Answer 1

这可能不是你打算做的，而是尝试一下：

问题在于position:absolute不允许它出现在顶部。

使用position:fixed进行游戏并使用margin-top，margin-left属性进行调整。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="wrapper-project">
<div class="project-pill">

    <div class="content">

        <img class="image" src="https://www.demaesschalckgoethals.be/files/
        images/01a59d76ec5642699cdbb2546 
         69ed025.jpg"/>

      <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
      consequat ex id justo rhoncus, a laoreet felis tincidunt. Aenean non 
      enim 
     varius, fringilla ante vitae, lacinia sapien. Sed malesuada orci ut 
     sapien 
    fringilla congue. Fusce sem nisi, laoreet quis nibh lobortis, mattis 
     consectetur dolor. Vestibulum ante ipsum primis in faucibus orci luctus 
      et ultrices posuere cubilia Curae; Mauris eu gravida velit, a 
      pellentesque nisi. 
      </div>
    </div>
  <div>

  </div>
  <div class="circle"></div>
</body>
</html>

此处的样式表

.wrapper-project{

flex-direction: column;

}

.project-pill{
 position: relative;
 margin: 0 auto;
 border-radius: 4vw;
 background-color: #DBDDDC;
 width: 25vw;
 height: 35vw;
 overflow: hidden;
 position: relative;
 }
 .image{
  border-radius: 4vw 4vw 0 0;
  width: 95%;
  padding-top: 2%;
  heigth: 50%;
   margin-left: auto;
  margin-rigth: auto;
   }
   .content{
    position: absolute;
     width: 100%;
     font-size: 1.7vw;
     height: 100%;
     text-align: center;
      font-family: poppins;
     }
    .text{
      heigth: 50px;
width: 95%;
}
.circle{
height:10%;
 width:10%;
border-radius:50%;
background-color: red;
position:fixed;
margin-top:210px;
margin-left:50px;
  }

一切顺利。

<强>干杯

将div推到另一个div上？

1 个答案: