Fixed block вопрос при закреплении

179

16 января 2019, 15:40

Есть страница

<!DOCTYPE html> 
<html> 
 
<head> 
 
  <link href="animate.css" rel="stylesheet"> 
 
  <style type="text/css"> 
    .top { 
      /* ВОТ ЗДЕСЬ ПРОБЛЕМА */ 
      /*position: fixed;*/ 
      float: left; 
      color: red; 
      margin: 0 auto; 
      width: 100%; 
      height: 300px; 
      background-color: green; 
    } 
     
    .left { 
      margin: auto; 
      top: 100; 
      bottom: 100; 
      float: left; 
      margin: 0 auto; 
      width: 45%; 
      height: 400px; 
      background-color: red; 
    } 
     
    .right { 
      /*fixed*/ 
      float: left; 
      color: black; 
      margin: 0 auto; 
      width: 55%; 
      height: 200px; 
      background-color: black; 
    } 
     
    .img { 
      width: 128px; 
      height: 160px; 
    } 
  </style> 
 
  <title>lol</title> 
</head> 
 
<body> 
 
 
 
 
  <a class="top">a</a> 
  <a class="left">a</a> 
 
  <a class="right"> 
 
  </a> 
 
</body> 
 
</html>

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

Answer 1

body { 
  padding: 0; 
  margin: 0; 
  color: white; 
} 
 
.top { 
  width: 100%; 
  height: 100px; 
  position: fixed; 
  float: left; 
  margin: 0 auto; 
  z-index: 1000; 
  /* для наглядности */ 
  background: linear-gradient(to bottom, rgba(0, 120, 0, 1.0), rgba(200, 150, 0, .7)); 
} 
 
.left { 
  width: 45%; 
  height: 500px; 
  position: relative; 
  top: 100px; 
  float: left; 
  /* для наглядности */ 
  background-color: #777; 
  background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%), linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%); 
  background-size: 50px 50px; 
} 
 
.right { 
  width: 55%; 
  height: 500px; 
  position: relative; 
  top: 100px; 
  float: left; 
  /* для наглядности */ 
  background-color: #777; 
  background-image: linear-gradient(30deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(120deg, black 25%, transparent 25%, transparent 75%, black 75%, black); 
  background-size: 60px 60px; 
  background-position: 0 0, 30px 30px 
} 
 
.img { 
  width: 128px; 
  height: 160px; 
}

<link href="animate.css" rel="stylesheet"> 
 
<a class="top">TOP</a> 
<a class="left">LEFT</a> 
<a class="right">RIGHT</a>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу реализовать гамбургер меню при адаптиве на сайте

Всем здравствуйте ребята

216

HTML

Разница между vh vw и % ,что лучше?

Разница между vh vw и % ,видел в интернете ,но не уловил сути,что лучше использовать vw или % для размеров и лучше для чего именно его использовать,для...

188

HTML

Нестандартные сетки Bootstrap 4

Я начала разбираться в BootstrapНе могу понять как с помощью него можно создавать не обычные сетки

169

HTML

Зачем нужен Gulp?

Подскажите, пожалуйста, перед началом веб-разработки, всегда нужно подключать Gulp и все плагины к нему? Просто начал изучение данного инструмента...

182