Блог

Главная - Вопросы по программированию - CSS: Заставьте div выходить за пределы нижней части его раздела

CSS: Заставьте div выходить за пределы нижней части его раздела

#css

Вопрос:

У меня есть два элемента раздела в этой ручке (https://codepen.io/databell/pen/oNWVKxE) и то, что я пытался сделать, — это заставить div, содержащий желтый круг (на самом деле это должно быть изображение, но та же идея), пройти мимо его раздела в следующий раздел.

Я пробовал отрицательное поле снизу, отрицательное дно и более низкий z-индекс для нижней части, и, несмотря ни на что, я не могу заставить этот круг расширяться наружу. Вместо этого он выглядит обрезанным.

Что еще я могу сделать, чтобы расширить этот раздел?

 html,
body {
  margin: 0;
  padding: 0;
}

section {
  position: relative;
  clear: both;
  overflow: auto;
  margin: 0;
  padding: 1.5rem;
}

.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 53rem;
  margin: 0 auto;
}

.section-one {
  background: #ed433c;
  z-index: 100;
}

.section-one .hero-column {
  float: left;
  position: relative;
}

.section-one .hero-column-left {
  width: 45%;
}

.section-one .hero-column-image {
  background: #00FF00;
  border-radius: 50%;
  margin-left: -3rem;
  margin-bottom: -6rem;
  width: 450px;
  height: 450px;
}

.section-one .hero-column-right {
  width: 50%;
  margin: 0 2.5%;
}

.section-two {
  background: #c0c0c0;
  z-index: 50;
} 
 <section class="section-one">
  <div class="container">
    <div class="hero-columns">
      <div class="hero-column hero-column-left">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim sed faucibus.</h2>
        <div class="hero-column-image">
        </div>
      </div>
      <div class="hero-column hero-column-right">
        <p>Ornare quam viverra orci sagittis eu. Ac placerat vestibulum lectus mauris ultrices. Accumsan sit amet nulla facilisi morbi tempus iaculis. Amet est placerat in egestas erat imperdiet sed. Lacinia quis vel eros donec ac odio tempor orci dapibus.
          Hac habitasse platea dictumst quisque sagittis purus sit amet. Dictum fusce ut placerat orci nulla pellentesque dignissim. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet aliquam id diam maecenas ultricies mi eget mauris.
          Et sollicitudin ac orci phasellus egestas tellus. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Neque gravida in fermentum et. Cras fermentum odio eu feugiat pretium nibh ipsum consequat.</p>
        <div class="he-hero__column-image">
        </div>
      </div>
    </div>
    <div>
</section>
<section class="section-two">
  <div class="container">
    <p>Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Viverra vitae congue eu consequat ac felis donec et odio. Sem viverra
      aliquet eget sit amet tellus cras adipiscing enim. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus nec feugiat in fermentum. Orci ac auctor augue mauris augue neque gravida in fermentum. Pharetra diam sit amet nisl suscipit
      adipiscing. Faucibus et molestie ac feugiat sed. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vitae nunc sed velit dignissim sodales. Accumsan lacus vel facilisis volutpat est velit egestas dui. Tempus iaculis urna id volutpat
      lacus laoreet non curabitur. Morbi blandit cursus risus at ultrices mi tempus imperdiet.</p>
    <p>Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Sapien eget mi proin sed. Nibh nisl condimentum id venenatis. Ac orci phasellus egestas tellus. Vulputate
      ut pharetra sit amet aliquam id diam maecenas ultricies. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Auctor elit sed vulputate mi. Ut venenatis tellus in metus vulputate eu. Eget mauris pharetra et ultrices neque ornare aenean.
      Aliquet nec ullamcorper sit amet risus nullam eget. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Enim eu turpis egestas pretium aenean pharetra magna ac.</p>
  </div>
</section>

Ответ №1:

Проблема заключалась в том, что вы установили section опцию тегирования position:relative; , которая ограничивала видимость только внутри контейнера. Чтобы решить эту проблему, нужно просто удалить это свойство. И добавьте для контейнера изображений position: absolute . Я улучшил несколько строк в css. пример

Удалять

 section {
  position:relative; <---
  clear:both;
  overflow:auto;
  margin:0;
  padding: 1.5rem;
}

Добавить

 .section-one .hero-column-image {
    position: absolute; <---
    background: #00FF00;
    border-radius:50%;
    margin-left: -3rem;
    margin-bottom: -6rem;
    width: 450px;
    height: 450px;
}

Затем вы можете настроить свой круг так, как хотите.

 html,
body {
  margin: 0;
  padding: 0;
}
section {
  height: 100%; /* added */
  display: flex; /* added */
  /* position: relative; */
  /* clear: both; */
  /* overflow: auto; */
  /* margin: 0; */
  padding: 1.5rem;
}
.container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 53rem;
  margin: 0 auto;
}
.section-one {
  background: #ed433c;
  /* z-index: 100; */
}
.section-one .hero-column {
  float: left;
  position: relative;
}
.section-one .hero-column-left {
  width: 45%;
  padding-bottom: 370px; /* added */
}
.section-one .hero-column-image {
  position: absolute;   /* added */
  background: #00ff00;
  border-radius: 50%;
  /* margin-left: -3rem; */
  /* margin-bottom: -6rem; */
  left: -3rem; /* added */
  bottom: -6rem; /* added */
  width: 450px;
  height: 450px;
  z-index: 10;  /* added */
}
.section-one .hero-column-right {
  width: 50%;
  margin: 0 2.5%;
}
.section-two {
  padding-top: 7rem; /* added */
  background: #c0c0c0;
  z-index: 50;
} 
 <section class="section-one">
  <div class="container">
    <div class="hero-columns">
      <div class="hero-column hero-column-left">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim sed faucibus.</h2>
        <div class="hero-column-image">
        </div>
      </div>
      <div class="hero-column hero-column-right">
        <p>Ornare quam viverra orci sagittis eu. Ac placerat vestibulum lectus mauris ultrices. Accumsan sit amet nulla facilisi morbi tempus iaculis. Amet est placerat in egestas erat imperdiet sed. Lacinia quis vel eros donec ac odio tempor orci dapibus.
          Hac habitasse platea dictumst quisque sagittis purus sit amet. Dictum fusce ut placerat orci nulla pellentesque dignissim. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet aliquam id diam maecenas ultricies mi eget mauris.
          Et sollicitudin ac orci phasellus egestas tellus. Proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Neque gravida in fermentum et. Cras fermentum odio eu feugiat pretium nibh ipsum consequat.</p>
        <div class="he-hero__column-image">
        </div>
      </div>
    </div>
    <div>

</section>
<section class="section-two">
  <div class="container">
    <p>Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Consectetur adipiscing elit duis tristique sollicitudin nibh sit. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Viverra vitae congue eu consequat ac felis donec et odio. Sem viverra
      aliquet eget sit amet tellus cras adipiscing enim. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus nec feugiat in fermentum. Orci ac auctor augue mauris augue neque gravida in fermentum. Pharetra diam sit amet nisl suscipit
      adipiscing. Faucibus et molestie ac feugiat sed. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vitae nunc sed velit dignissim sodales. Accumsan lacus vel facilisis volutpat est velit egestas dui. Tempus iaculis urna id volutpat
      lacus laoreet non curabitur. Morbi blandit cursus risus at ultrices mi tempus imperdiet.</p>
    <p>Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Sapien eget mi proin sed. Nibh nisl condimentum id venenatis. Ac orci phasellus egestas tellus. Vulputate
      ut pharetra sit amet aliquam id diam maecenas ultricies. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Auctor elit sed vulputate mi. Ut venenatis tellus in metus vulputate eu. Eget mauris pharetra et ultrices neque ornare aenean.
      Aliquet nec ullamcorper sit amet risus nullam eget. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Enim eu turpis egestas pretium aenean pharetra magna ac.</p>
  </div>
</section>

Комментарии:

1. Нашел свои проблемы. У меня был еще один div с, я считаю, чрезмерным и ненужным clear или float. Сейчас работаю. Спасибо.

Метки: