Позиция Абсолютная: Отрицательные значения

Я пытаюсь создать страницу с четырьмя контейнерами div, каждая из которых имеет ширину 100% и высоту 100%. Я хочу, чтобы в центре был главный div, а затем один слева, справа и внизу (да, они должны быть расположены так, как это делается для анимации jQuery).Позиция Абсолютная: Отрицательные значения

Ниже мой текущий код (а вот JSFiddle):

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="stylesheets/test.css"> 
</head> 
<body> 
    <div id="container1"></div> 
    <div id="container2"></div> 
    <div id="container3"></div> 
    <div id="container4"></div> 
</body> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    /*overflow: hidden;*/ 
} 

#container1 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: blue; 
} 

#container2 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: -100%; 
    background-color: red; 
} 

#container3 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 100%; 
    background-color: green; 
} 

#container4 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 100%; 
    left: 0; 
    background-color: orange; 
}

У меня не было проблемы с div с которые находятся справа и внизу, но я не могу получить налево.

Я также пытался расположить левую div на left: 0 и top: 0 с главным делением при left: 100% и top: 0, но я не уверен в том, как получить для загрузки страницы просмотра основного div (синей). Пример этого - this JSFiddle.

Любые идеи?

источник

2013-10-25 MitulP91

Немного сложно понять, что вы хотите сделать. Это неверно. Я предполагаю, что http://jsfiddle.net/P2rjV/10/ – Cyclonecode

Я бы предложил вам использовать z-index для этой цели! Вам не нужно указывать какие-либо атрибуты позиции , просто попробуйте дать z-index и в анимации jQuery вы можете изменить $ ("# ID"). Css ({z-index: "maxvalue"}); –

@ KristerAndersson Прошу прощения, если я не понял. Я действительно хочу, чтобы оранжевый 'div' находился слева от синего' div'. Я сделал это во второй скрипке, которая была опубликована, но я хочу, чтобы страница загружалась в синий 'div'. – MitulP91

Ваша задача не в позиционировании элементов - речь идет о том, что вам нужно, чтобы страница была прокручена до горизонтального центра вашего макета при загрузке. Это можно сделать только через javascript. Here's a great q/a on this with a working fiddle.

Обновление: здесь ваш код обновлен с помощью методов и скриптов по приведенной выше ссылке. View it on Codepen.

источник

2013-10-25 03:35:18

Большое вам спасибо. Должен был это видеть. Оцените редактирование кода. – MitulP91

это не будет работать таким образом правильный и простой способ будет использовать JavaScript, чтобы сосредоточиться на центре DIV, когда страница загружается или сделал больше контента DIV, который имеет все другие дивы и изменить его положение в соответствии в div, который вы хотите показать [вы можете добавить ширину страницы в свое свойство слева для прокрутки вправо и т. д.)

источник

2013-10-25 03:40:12 ManZzup

Позиция Абсолютная: Отрицательные значения

ответ

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