Далее следует длинное объяснение, но это единственный способ эффективно сообщить о проблеме, которую я пытаюсь решить...
Я (отчаянно и совершенно безуспешно) пытался наложить divs без использования абсолютного позиционирования. Потребность связана с корзиной PayPal, которую я размещаю на сайте с помощью Javascript. Естественное положение тележки затруднено с верхним краем веб-страницы (а не с ее содержимым div, которое #wpPayPal или оболочкой для этого div, #main).
Автор script настоятельно рекомендует не настраивать таблицу стилей корзины, но я нашел учебник, который он написал, что позволяет вставлять корзину в разделитель div, с инструкциями по позиционированию для контейнера, который работает - я смог расположить корзину ниже раздела верхнего баннера сайта. Однако...
Форма HTML корзины и элемент ul внутри каждого из них имеют требования к высоте в таблице стилей корзины, и это вызывает основной контент страницы, завернутый контейнером div #imageWrapper, слишком далеко вниз по странице, чтобы быть приемлемым.
Я попытался разместить #imageWrapper над #main несколькими идеями, собранными из сообщений на этом сайте, без успеха. Я пробовал абсолютное позиционирование на #imageWrapper, но это освобождает нижний колонтитул, чтобы плавать ниже. #imageWrapper height является переменной, поэтому я не хочу удерживать нижний колонтитул на месте с высотой, так как минимальная высота для предотвращения перекрытия приведет к тому, что нижний колонтитул слишком сильно удалит большую часть содержимого сайта.
Я также попытался вытащить позицию: относительно формы корзины CSS, но корзина сразу возвращается к вершине веб-страницы. Маржа, верхняя граница и т.д., Не исправляют это.
Затем я устанавливаю z-index для main в 0 и применяемое положение: относительно #imageWrapper с z-index: 100. Корзина снова появилась, но все еще удерживает #imageWrapper.
Предложения приветствуются. Я не являюсь пользователем интерфейса каким-то образом воображения, просто парень, который знает, как использовать Google, поэтому заранее заблаговременно за четкое формулирование вашего разрешения:) Кроме того, FYI, в настоящее время у меня есть требование минимальной высоты для тележки форма установлена в 0 и устанавливает элемент UL в пределах height: auto. При использовании только одного элемента в корзине это позволяет #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> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</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;
}
