Относительное и абсолютное позиционирование таблиц

Question

Я ищу способ наложения таблицы на другую, но с условием.

Когда вы изменяете размер браузера или меняете разрешение экрана, поэтому все положения должны быть в порядке.

Я тестирую абсолютное позиционирование (z-index и top и left), но когда вы меняете размер браузера или меняете разрешение экрана, таблица абсолютного позиционирования теряет мое любимое положение в другой статической таблице.

Я тестирую относительноепозиционирование (z-index и top и left) и когда вы меняете размер браузера или меняете разрешение экрана, все в порядке, но мы зарезервировали место для относительной таблицы.Как я могу удалить это?

Answer 1

Я думаю, что это не проблема относительной или абсолютной позиции.Для того, чтобы 2 таблицы / деления могли перекрываться, следует использовать отрицательное поле.Чтобы макет выглядел эластичным при изменении размера браузера или разрешения экрана, вы должны использовать% в качестве единицы ширины для таблиц / делений.Вот пример

HTML

<div class="table1"></div>
<div class="table2"></div>

CSS

.table1{width:80%; height:200px; background-color:#cfcfcf;margin: 0px auto;}  
.table2{width:60%; height:200px; background-color:#fffae4;margin:-20px auto 0;}

Другой способ - использовать относительную верхнюю позицию длядобиться эффекта перекрытия.И тогда позиция должна быть относительной или абсолютной, но с другой математикой, чтобы вычислить значение отрицательной верхней позиции.Использовать относительное положение легко для понимания.

Вот еще один CSS, использующий относительное положение.

.table1{position:relative; width:80%; height:200px;background-color:#cfcfcf;top:10px;margin:0 auto}  
    .table2{position:relative; width:60%; height:200px; background-color:#fffae4;top: -20px;margin:0 auto}

Так что ключ использует% в качестве единицы ширины.Вы можете пройти тест с другими устройствами на этой странице .