Я сделал изображение 100% высоты и ширины. Но у меня были некоторые заголовки и абзацы внизу. При просмотре моего веб-сайта я не могу прокрутить вниз, чтобы увидеть заголовки и абзацы? Кроме того, я хочу небольшую панель навигации для гамбургера поверх изображения, вверху. Но с момента создания полноэкранного изображения это тоже «оттолкнуло»?Как сделать сайт прокруткой вниз

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset = "utf-8"/> 
    <title>XXXXX</title> 
<link rel = "stylesheet" href="s.css"/> 

</head> 
<body> 
    <nav id = "burger"> 
    </nav> 

    <section id = "top_image"> 
     <img src="images/bg1.png"/> 
    </section> 

    <section id = "description"> 
     <article> 
      <header> 
       <h4>DESCRIPTION</h4> 
      </header> 
      <p> 
       XXXXXX<br /> 
       XXXXXXXXXXX<br /> 
       XXXXXXXX 
      </p> 
      <p> 
       XXXXXXX<br /> 
       XXXXXXX<br /> 
       cXXXX<br /> 
       XXXXXXX 
      </p> 
     </article> 
    </section>

CSS

img { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
}

источник

2015-09-01 KeyboardNinja

ли добавление 'переполнения: стиль scroll' в' body' не работает? –

Когда вы делаете снимок (или в данном случае все теги IMG) position: absolute, вы берете их из потока макета страницы. Это означает, что все остальное оказывает подобный образ, которого нет. Ваша строка меню и параграфы находятся под изображением, но вы не можете их видеть. Если вы сделаете текст абзаца достаточно длинным, он высунет нижнюю часть. Если вы хотите, чтобы изображение, чтобы быть частью макета страницы, избавиться от position: absolute.

Добавить это временно ваш CSS, чтобы увидеть, что происходит:

#description { 
    position: relative; 
    z-index: 100; 
}

Вы вдруг увидите текст сверху изображения.

источник

2015-09-01 19:40:14

Проблема заключается не в том, что вещи толкаются вниз, проблема в том, что ваше изображение покрывает все остальные элементы страницы, потому что вы позиционировали ее абсолютно. Вы не можете прокручивать, потому что нечего прокручивать.

Если вы пытаетесь использовать изображение в качестве фонового изображения, тогда вы должны закодировать его как фоновое изображение.

body { 
    background:url('http://placehold.it/1024x768'); 
    background-size:cover; 
}

JSFiddle

источник

2015-09-01 19:40:23 APAD1

Я не хочу, чтобы это было как изображение bg для всей веб-страницы. Только bg для размера 1 экрана при загрузке. Затем я хочу прокрутить вниз по экрану еще один и т. Д.? – KeyboardNinja

Взгляните на [fullPage JS] (http://alvarotrigo.com/fullPage/#firstPage), это похоже на то, что вам нужно. – APAD1

Спасибо. Хотя, из интереса, я хотел бы знать, как он будет кодироваться без него? – KeyboardNinja

Как сделать сайт прокруткой вниз

ответ

JSFiddle

Смежные вопросы