it-swarm.com.ru

Наложение Div без абсолютной позиции

Ниже приводится длинное объяснение, но это единственный способ эффективно сообщить о проблеме, которую я пытаюсь решить ...

Я (несколько отчаянно и совершенно безуспешно) пытаюсь наложить div без использования абсолютного позиционирования. Необходимость проистекает из корзины Paypal, которую я размещаю на сайте через Javascript. Естественная позиция корзины жесткая по отношению к верхнему полю веб-страницы (не содержащему ее div, который является #wpPayPal, или оболочка для этого div, #main).

Автор сценария настоятельно рекомендует не настраивать таблицу стилей корзины, но я обнаружил, что он написал учебник, который позволяет вставлять корзину в div заполнителя, с инструкциями по позиционированию для работающего контейнера - я смог разместить корзину под верхним баннером сайта раздел. Тем не мение...

HTML-форма корзины и элемент ul внутри каждого имеют требования к высоте в таблице стилей корзины, и это толкает основное содержимое страницы, заключенное в контейнер div #imageWrapper, слишком далеко вниз страницы, чтобы быть приемлемым.

Я попытался расположить #imageWrapper над #main с несколькими идеями, собранными из сообщений на этом сайте, но безуспешно. Я пробовал абсолютное позиционирование на #imageWrapper, но это освобождает нижний колонтитул, чтобы плавать под ним. # высота imageWrapper является переменной, поэтому я не хочу удерживать нижний колонтитул на месте с высотой, так как минимальная высота для предотвращения наложения будет слишком сильно сдвигать нижний колонтитул для большей части содержимого сайта.

Я также попытался вытянуть позицию: относительно CSS-формы формы корзины, но корзина сразу переместилась обратно в верхнюю часть веб-страницы. Маржа, верхний край и т.д. Не исправляют это.

Затем я читаю статью об использовании позиции: относительный и z-index для наложения div. Попробовал тоже сначала, положив z-index: -1 на #main (div, который оборачивает корзину Paypal), но корзина исчезает. Не уверен, куда он идет, так как навигационная система сайта, также обернутая #main, осталась на месте.

Затем я установил z-index для main на 0 и применил позицию: относительно #imageWrapper с z-index: 100. Корзина снова появилась, но все еще удерживает #imageWrapper.

Предложения приветствуются. Я не являюсь человеком интерфейса с какой-либо натяжкой, просто парень, который знает, как использовать Google, поэтому заранее спасибо за четкое формулирование вашего разрешения :) Кроме того, к вашему сведению, в настоящее время у меня есть требование минимальной высоты для корзины Форма установлена ​​в 0, и установите элемент UL в пределах высоты: авто. Если в корзине есть только один элемент, это позволяет #imageWrapper перемещаться вверх по странице, чтобы быть приемлемым, но это не является жизнеспособным долгосрочным решением.

Вот пример страницы - чтобы увидеть корзину, добавьте товар, используя выпадающий список, который появляется под основным изображением. В развернутом состоянии вы увидите, как #imageWrapper сидит против него.

Я включил части оскорбительного HTML/CSS ниже:

<div id="main">
    <div id="wpPayPal">
    </div><!--end wpPayPal-->
    <div id="breadcrumbs">
        <span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> &raquo;</span></span>
    </div> <!--end breadcrumbs -->
</div><!-- end Main -->

<div id="imageWrapper">
    <div id="imageInnerWrapper">
        <div id="featureImage">
            <div class="filename"><h1>~&nbsp;Bryce Canyon Sunrise | Bryce Canyon | Utah&nbsp;~</h1>
            </div><!--end filename-->

так далее...

#main {
    display: inline;
    position: relative;
    z-index: 0;
}

#imageWrapper {
    clear: both;
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#imageInnerWrapper {
    width: 840px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 100;
}

#featureImage {
    width: 840px;
    margin: 0 auto;
    padding: 0;  
}

#wpPayPal {
    overflow: hidden;
    float: right;
    margin-right: 100px;
    min-width: 365px;
    min-height: 20px;
}

/* Override the default Mini Cart styles */

#wpBody #PPMiniCart form {
    position: relative;
    right: auto;
    width: auto;
    min-height: 0;
}

#wpBody #PPMiniCart form ul {
    height: auto;
}
26
jivers

Простая скрипка: просто CSS 

Какой-то парень опубликовал другой, но у него была куча лишнего ненужного кода и немного JS В другом посте был ответ, но что-то не хватало

.over {
  background: rgba(230, 6, 6, .5);
  float: right;
  height: 460px;
  margin-top: -500px;
  margin-right: 159px;
  overflow: visible;
  position: relative;
  width: 560px;
  color: #FFFFFF;
  /* Just for looks*/
  z-index: 1000;
  padding: 20px/* Just for looks*/
}

.over span {
  position: relative;
  /* Just for looks*/
  top: 15px;
  /* Just for looks*/
}

.this {
  width: 560px;
  height: 460px;
  color: #FFFFFF;
  /* Just for looks*/
  padding: 20px;
  /* Just for looks*/
  background-image: url("http://www.tshirtvortex.net/wp-content/uploads/dramaticchipmunk.jpg");
  /* Just for looks*/
}
<div class="this">To BE UNDER</div>
<div class="over"><span>..or not To BE UNDER</span></div>

http://jsfiddle.net/3WDf7/

14
Kay Valle Ganev

Понял!!! : D

Чистое решение Css Очень просто. Поставь следующее.

#main {
float: right;
overflow: visible;
position: relative;
z-index: 1000;
height: 177px;
width: 100%;
}

Заменить все, что у вас есть в CSS #main на что я сделал выше .

Итак удалить следующее:

display: inline;
position: relative;
z-index: 0;

Объяснение: Основная идея здесь состоит в том, чтобы плавать основной элемент, сделать его равным определенной высоты поэтому ни в коем случае он не толкает все вниз. Но сделайте его переполнение видимым . Переполнение содержимого не влияет на братьев и сестер of основной элемент .

6
Muhammad Umer

Фон Div для блока с динамической высотой может быть реализован с помощью flexbox без абсолютного позиционирования:

/* Every rule not marked by "required" is optional and used only to decorate the example */
.block {
    margin: 10px 50px;
    display: flex; /* required */
    flex-flow: row nowrap; /* required */
}
.block .background,
.block .foreground {
    box-sizing: border-box; /* required */
    width: 100%; /* required */
    flex: none; /* required */
}
.block .background {
    background: #9ff;
    color: #fff;
    padding: 15px;
    font-size: 30px;
}
.block .foreground {
    padding: 15px;
    border: solid 1px;
    margin-left: -100%; /* required */
}
.block .foreground .outside {
    position: absolute;
    top: 5px;
    left: 8px;
}
<div class="block">
    <div class="background">
        Background
    </div>
    <div class="foreground">
        <div>
            <div class="outside">Outside</div> <!-- The "outside" div is also optional -->
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio incidunt perspiciatis sapiente aspernatur repellat delectus atque quae optio nam? Pariatur explicabo laboriosam dolores temporibus molestiae error ipsa sunt molestias doloremque odio nemo iure similique quae exercitationem, adipisci, ullam dicta esse numquam beatae qui velit asperiores. Dolore, quo illum necessitatibus tempora earum nihil cumque corporis aut error eius voluptatibus quia, pariatur.</div>
        </div>
    </div>
</div>

Решение поддерживается около 97% браузеров .

3
Finesse

Ни один из предыдущих ответов на самом деле не поможет с вашим требованием, которое должно позволить PPMiniCart расширяться и сжиматься, не нажимая imageWrapper вниз.

Хитрость в том, чтобы придать wpPayPal фиксированную высоту, достаточно большую, чтобы вместить сокращенную версию PPMiniCart (подойдет 40px - это даст корзине достаточно места, не толкая imageWrapperслишком далеко вниз). 

#wpPayPal {
    height:40px;
}

Затем передайте main (контейнер, содержащий wpPayPal) z-index больше, чем imageWrapper, чтобы он переполнял его.

#main {
    z-index: 1;
}
#imageWrapper {
    z-index: 0;
}

Установка для imageWrapper z-index значения 100 переусердствует, я бы порекомендовал 0, как я делал выше. 

Вам также нужен JavasScript для установки overflow: visible на wpPayPal после расширения PPMiniCart и удаления его до того, как он сжимается. К счастью Mini Cart JS предоставляет приятный управляемый событиями API, который позволяет настраивать обратные вызовы. Поскольку вы используете jQuery на своей веб-странице, давайте воспользуемся этим:

Paypal.apps.MiniCart.render({
    parent: 'wpPayPal',
    events: {
        afterShow: function () {
            $("#wpPayPal").css("overflow", "visible");
        },
        onHide: function () {
            $("#wpPayPal").css("overflow", "");
        }
    }
});

Обратите внимание на тщательный выбор обратных вызовов afterShow и onHide, если вы попытаетесь сделать это по-другому (установка overflow: visible перед расширением PPMiniCart или удаление его до заключения контрактов PPMiniCart) PPMiniCart будет «всплывать» во время перехода. 


Наконец, рабочая скрипка стоит тысячи слов.

2
Anthony Accioly

теперь вы можете сделать это с помощью сетки.

.parent {
  display: grid;
  grid-template-columns: 1fr;
}

.parent div {
 padding: 50px;
 background-color: rgba(0,0,0,0.5);
 grid-row-start: 1;
 grid-column-start: 1;
}
<div class="parent">
  <div class="child1">
  1
  </div>
  <div class="child2">
  2
  </div>
</div>

1
patelarpan

Выяснили элегантное решение вашей проблемы без абсолютного позиционирования OR плавающих элементов с помощью flexbox - главное преимущество заключается в том, что обе высоты div учитываются при расчете родительской высоты. Очень полезно для наложения текста на изображение:

body {
  font-family: -Apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  max-width: 500px;
  /*border: 1px solid Lime;*/
}

.card {
  display: flex;
  /*border: 1px solid red;*/
  overflow: hidden;
}

.box {
  position: relative;
  min-width: 100%;
  width: 100%;
  flex-basis: 100%;
  flex-grow: 1;
}

.box--image {
  z-index: 1;
  overflow: hidden;
}

.box--image.box--heightrestricted {
  max-height: 300px;
}

.box--text {
  z-index: 2;
  margin-left: -100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: red;
}

.box--text h3 {
  margin: 0;
  padding: 1rem;
}
<div class="container">

  <button onclick="document.getElementById('imagebox').classList.toggle('box--heightrestricted')">toggle image max-height</button>
  <br>
  <br>

  <div class="card">

    <div id="imagebox" class="box box--image box--heightrestricted">
      <img src="https://placeimg.com/640/640/4" alt="" />
    </div>

    <div class="box box--text">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in urna porta, maximus velit vitae, suscipit eros. Praesent eleifend est at nisi laoreet auctor. Nunc molestie fringilla magna et dictum. Nam ac massa nec erat consequat lacinia in in leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas sollicitudin nibh nisl, sed molestie lorem lobortis in. Nulla eget purus a risus scelerisque cursus. Praesent nisl dolor, varius eget faucibus sit amet, rutrum non lorem. Ut elementum sapien sed facilisis tempus. Morbi nec ipsum sed lacus vulputate sodales quis ut velit. Quisque id ante quis leo pharetra efficitur nec at mauris. Praesent dignissim hendrerit posuere. Vestibulum venenatis urna faucibus facilisis sodales. Suspendisse potenti. Proin a magna elit. Aenean vitae aliquam est, quis fringilla lectus.</h3>
    </div>

  </div>

</div>

1
L Daniel Swakman

Также можно использовать flexbox для создания контейнера вкладок без абсолютной позиции:

/* Flex Overflow */
section {
  display: flex;
  width: 100%;
  overflow: hidden;
}

section article {
  flex: 100% 0 0;
  order: 0;
}

section article:target {
  order: -1;
}

/* UI */
section { background-color: #ecf0f1; }
section article { 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ecf0f1;
  font-size: 20px;
  min-height: 8em;
  visibility: hidden;
  opacity: 0;
  transition: visibility .5s ease, opacity .5s ease;
}
section article:first-child,
section article:target {
  visibility: visible;
  opacity: 1;
}
section article#zoneA { background-color: #2980b9; }
section article#zoneB { background-color: #16a085; }
section article#zoneC { background-color: #f39c12; }
section article#zoneD { background-color: #8e44ad; }
<ul>
  <li><a href="#zoneA">Zone A</a></li>
  <li><a href="#zoneB">Zone B</a></li>
  <li><a href="#zoneC">Zone C</a></li>
  <li><a href="#zoneD">Zone D</a></li>
</ul>

<section>
  <article id="zoneA">A</article>
  <article id="zoneB">B</article>
  <article id="zoneC">C</article>
  <article id="zoneD">D</article>
</section>

0
NSD