Як би ви зробили два накладки <div> s?

154

Мені потрібні два діви, щоб виглядати трохи так:

    |               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

Який найновіший / найелегантніший спосіб їх акуратного перекриття? Логотип матиме фіксовану висоту та ширину і буде торкатися верхнього краю сторінки.

css html overlap

88

Я можу підійти до цього так (CSS та HTML):

html,
body {
  margin: 0px;
}
#logo {
  position: absolute; /* Reposition logo from the natural layout */
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}
#content {
  margin-top: 100px; /* Provide buffer for logo */
}
#links {
  height: 75px;
  margin-left: 400px; /* Flush links (with a 25px "padding") right of logo */
}

<div id="logo">
  <img src="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

Розгорніть фрагмент

— Оуен
джерело

2

чи є спосіб зробити контент просто уникати місця, що використовується логотипом?

— Хав'єр

1

хм, ви можете уточнити? я вважаю, що ви просто хочете, щоб логотип був вище вмісту? якщо так, то це просто нормальний потік divs (тому видаліть ліворуч, верх, позицію з #logo). у мене є відчуття, що ти маєш на увазі щось інше! :)

— Оуен

2

Я думаю, що малося на увазі вміст (текст) обгортати логотип

— Davy8

2

ага, я впевнений, що ні. проблема, що є елементом, може бути плаваючою або розміщеною, але не обома. поки вони не розвинуть якусь плавучку: ідея центру ...

— Оуен

88

Просто використовуйте негативні поля, у другому розділі сказано:

<div style="margin-top: -25px;">

І переконайтеся, що встановіть властивість z-index, щоб отримати потрібне шарування.

— TravisO
джерело

9

Це, безумовно, найпростіший метод, і його можна легко адаптувати для перекриття нижнього колонтитулу, використовуючи нижнє поле у вмісті сторінки. Дякую!

— Peter DeWeese

1

це рішення, схоже, залежить від DOCTYPE, чи не так? тому що він не працював з HTML5 DOCTYPE, коли я намагався.

— alumi

2

Це має бути прийнята відповідь, положення абсолютного має тенденцію викликати проблеми.

— Дмитро

5

При абсолютному або відносному розташуванні ви можете робити всілякі перекриття. Ви, мабуть, хочете, щоб логотип був стилізований як такий:

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

Примітка: абсолютне положення має свої ексцентриситети. Вам, напевно, доведеться трохи експериментувати, але робити це те, що ви хочете, не повинно бути занадто важким.

— хитрий
джерело

1

Чи це призведе до того, що логотип перекриває текст, де є посилання? Або це потіснить посилання на бік?

1

Ні, абсолютний ефект ефективно видаляє тег із потоку. Це було б так, ніби його там не було.

— sblundy

2

Використовуючи CSS, ви встановлюєте логотип div на позицію абсолютного і встановлюєте z-порядок вище другого діла.

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

— FlySwat
джерело

1

Якщо ви хочете, щоб логотип займав пробіл, вам, ймовірно, краще пропустити його вліво, а потім перемістити вміст за допомогою поля, подібного до цього:

#logo {
    поплавок: зліва;
    маржа: 0 10px 10px 20px;
}

#content {
    маржа: 10px 0 0 10px;
}

або будь-який запас ви хочете.

— джиші
джерело