0
У меня есть сетка продуктов, вложенная вложенные div для содержимого внутри коробки, а затем подробное описание. но по какой-то причине мой текст продолжает плавать внутри div над ним.текст, всплывающий в div выше
body{
\t margin: 0 auto;
\t max-width: 960px;
}
#big-divider{
\t text-align: center;
\t margin-bottom: 15px;
\t color: white;
\t font-family: arial, helvetica, sans-serif;
\t text-transform: uppercase;
\t font-size: 32px;
}
#sub-stamp{
display: block;
margin: auto;
width: 100%;
\t max-width: 287px;
} \t
#header{
\t margin: 25px;
}
#header > img:nth-child(2){
\t display: block;
\t margin: auto;
\t margin-top:-10px;
\t width: 100%;
\t max-width: 746px;
}
h2{
\t font-family: avenir next, arial, sans-serif;
\t font-weight: 500;
\t font-style: oblique;
\t font-size: 33px;
\t text-align: right;
\t text-transform: uppercase;
\t margin:0;
\t margin-top:-42px;
\t line-height: 100%;
\t color: #31bbac;
\t
}
h1{
\t font-family: avenir next, arial, sans-serif;
\t font-weight: 800;
\t font-size:41px;
\t background-color: #0033a0;
\t padding-top: 4px;
}
.box{
\t position: absolute;
\t display: block;
\t border: solid 3px #0033a0;
\t height: 310px;
\t width: 288px;
}
.price span{
font-family: avenir next, arial, sans-serif;
\t font-weight: 800;
\t background-color: #0033a0;
\t color: white;
\t font-size: 25px;
\t padding: 0px 5px;
}
#info{
\t position: inherit;
\t bottom:0px;
\t right: 0;
}
.box img{
display: block;
margin: auto;
width: 100%;
\t max-width: 252px;
\t padding: 15px;
}
#product-grid{
\t margin: 0 25px;
}<!DOCTYPE html>
<html>
<head>
\t <title>YES TEST</title>
\t <link rel="stylesheet" type="text/css" href="yes-style.css">
\t <link rel="stylesheet" type="text/css" href="mobile.css">
</head>
<body>
\t <div id="header" >
\t \t <img src="img/top-shor-line-logo.png">
\t \t <img src="img/top-stamp-sale.png">
\t \t <h2>
\t \t \t CoJack Tables
\t \t \t </br>
\t \t \t Are Super Cheap
\t \t </h2>
\t </div>
\t <div id="big-divider">
\t \t <h1>
\t \t \t Save big on the things that you need!
\t \t </h1>
\t \t <img id="sub-stamp" src="img/tables.png">
\t </div>
\t <div id="product-grid">
\t \t <div class="offer">
\t \t \t <div class="box">
\t \t \t \t <div class="price">
\t \t \t \t \t <span>$<span>170.69</span></span>
\t \t \t \t </div>
\t \t \t \t <img src="img/cojack.jpg">
\t \t \t \t <div class="price" id="info">
\t \t \t \t \t <span>INFO</span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <div class="details">
\t \t \t <h4>
\t \t \t \t CoJack Lift Table
\t \t \t </h4>
\t \t \t <span class="product-number">
\t \t \t \t 195.1038.00
\t \t \t </span>
\t \t </div>
\t </div>
</body>
</html>Любое понимание было бы весьма признателен!
Не совсем уверен, где в условии образ проблемы будет. Если бы вы могли попытаться указать на изображение, которое поможет. Кроме того, попробуйте избежать кодовых дампов. – bonzo
Эта проблема заключается в том, что вы используете 'position: absolute;' для '.box', что заставляет элемент не занимать места в потоке документа. – hungerstar
Я подозреваю, что проблема заключается либо в стиле 'position: absolute' в классе ящиков, либо в классе стилей нет класса номера продукта. Абсолютная позиция удаляет ящик из регулярного потока документа, поэтому недостающему классу необходимо установить положение относительно поля. – jac