Относительная позиция с фоновым изображением - PullRequest
Новая
       10

Относительная позиция с фоновым изображением

0 голосов
/ 10 июня 2011

У меня есть div, который я бы хотел разместить на 25% сверху.Однако 25% вычисляются относительно размера фонового изображения, а не относительно размера видимого экрана.Как это можно исправить?

Обновление: теперь работает верхнее поле, но не левое: (

Любая подсказка? 

body {
    background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
    background-size: auto 100%;
    background-attachment: fixed;
    overflow: hidden;
    align: center;
} 

#container {
    background-color: #ffffe4;
    position: absolute;
    width: 776px;
    height: 400px;
    top: 25%;
    margin-left: auto;
    text-align: center;
    overflow: auto;
}

Ответы [ 3 ]

2 голосов
/ 10 июня 2011

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

#myDiv { position: absolute; top: 25%; }

2) убедитесь, что ваш div не находится внутри другого позиционируемого элемента (если вы не уверены в этом, просто поместите его внутри тега <body>, больше ничего)

1 голос
/ 10 июня 2011

использовать свойство css: 

div#myDiv {
position:absolute;
top: 25%;
}

на погружение, которое вы хотите поместить на 25% от верхней части видимого экрана.

0 голосов
/ 10 июня 2011

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

если вы используете абсолютную позицию, процент будет рассчитываться по размеру экрана.

Поэтому попробуйте использовать абсолютную позицию вместо относительной.

отредактированный ответ для комментария, просто добавьте дополнительный div с оберткой id и измените позиции, см. Пример ниже: 

<html>
<head>
<style type="text/css">
body { 
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;  
background-attachment: fixed; 
overflow: hidden; 
text-align: center; 
}
#wrapper {
position:absolute;
width:100%;
height:100%;
} 
#container { 
background-color: #ffffe4; 
position: relative; 
margin:0 auto;
width: 776px; 
height: 400px; 
top: 25%; 
text-align: center; 
overflow: auto; 
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="container">
        bla bla bla
    </div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...