Как сделать, чтобы дочерний элемент перекрывал родительский элемент? - PullRequest
Новая
       22

Как сделать, чтобы дочерний элемент перекрывал родительский элемент?

0 голосов
/ 28 апреля 2020

Я использую только CSS и Flexbox для создания адаптивной страницы. У меня есть дочерний элемент, который должен «переполняться» вне родительского элемента, как показано здесь:

enter image description here

<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
   </div>
   <div class="hero-img">
     <img src="assets/image-1.jpg">
   </div>
</div>

CSS 

.container-hero {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: 40px 0;
}

.hero-img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.hero-img img {
  width: 100%;
  height: auto;

}


  .hero-content {
    background-color: #D64C31;
    color: #FFFFFF;
    align-self: flex-end;
    width: 50%;
    position: absolute;
    bottom:0;
    left:0;
    padding: 40px 60px;
  }

Любая помощь будет оценена!

Ответы [ 4 ]

0 голосов
/ 28 апреля 2020

Используйте свойства позиционирования CSS. 

.container-hero {
  position: relative; /* creates the container for absolutely positioned children */
}

.hero-content {
  position: absolute;
  bottom: -20px;  /* use this offset to align vertically */
  left: 20px;     /* use this offset to align horizontally */
  background-color: #D64C31;
  color: #FFFFFF;
  width: 225px;
  padding: 40px 60px;
}
<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
  </div>
  <div class="hero-img">
    <img src="https://via.placeholder.com/500x250.png?text=hero image">
  </div>
</div>
0 голосов
/ 28 апреля 2020

Как это? 

<html>
<head>
    <style>
        .container {
            background: #ccc;
            width: 50%;
            margin: 0 auto;
            position: relative;
            height: 700px;
        }
        .overflowing-element {
            background: red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: -200px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        test
        <div class="overflowing-element">
            bla
        </div>
    </div>
</body>
</html>

Просто работает с фиксированной шириной этого переполняющегося элемента или с JavaScript.

РЕДАКТИРОВАТЬ: Вы только что отредактировали свои изображения, а теперь я нет действительно знаю, что вы имеете в виду: D

0 голосов
/ 28 апреля 2020

Я понял, спасибо за вашу помощь!

Мой родительский элемент имеет overflow: hidden Я отключил его и настроил дочерний элемент следующим образом: 

bottom: -40px

Если у вас есть какие-либо отзывы или это считается плохой практикой, пожалуйста, дайте мне знать , Я только начинаю здесь :)

0 голосов
/ 28 апреля 2020 

 .container-hero {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* overflow-x: hidden; */
  position: relative;
  margin: 40px 0;
}

.hero-img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.hero-img img {
  width: 100%;
  height: auto;

}


  .hero-content {
    position:absolute;
    background-color: #D64C31;
    color: #FFFFFF;
    width: 50%;
    padding: 40px 60px;
    bottom: -20px;
    left:0;
  }
</div>
<div class="container-hero">
  <div class="hero-content">
    <h1>Tech Challenge</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
   </div>
   <div class="hero-img">
     <img src="https://source.unsplash.com/800x300">
   </div>
</div>

Требуемое свойство CSS Позиция.

Ссылка: CSS Позиция 

.parent{
  width:250px;
  height: 20px;
  background: yellow;
  position:relative;
}
.child{
  width:80px;
  height: 100px;
  background: purple;
  position:absolute;
  bottom: 0;
  right:0;
}
<div class="parent">
  <div class="child"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...