CSS-позиционирование и перекрытие - PullRequest
Новая
       27

CSS-позиционирование и перекрытие

0 голосов
/ 28 октября 2011

У меня есть сгенерированный CSS раздел HTML-страницы.В настоящее время он находится в основной области содержимого страницы, которая находится справа от панели навигации.У меня есть график, который должен быть центрирован по всей HTML-странице, включая нахождение под панелью навигации.

Как бы я использовал позиционирование CSS для наложения блока HTML-кода (который также имеет немного CSS) для центрирования по всей странице.

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

.layout #mainContent  h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}

HTML-код, который будет наложен, будет иметь значение h6.

HTML-код будет написан таквесь код в разделе моего html, но он должен быть центрирован относительно всей HTML-страницы, а не только в секции CSS в штучной упаковке.

Ответы [ 2 ]

1 голос
/ 05 ноября 2012

Мы часто центрируем вещи, используя css, и вот как мы это сделаем: 

.layout #mainContent h6 {
position:absolute;
left:50%; 
margin-left:-1000px; /* half the element's width */
top:50%;
margin-top:-10px; /* half the element's height */
z-index:5
}

Но, конечно, чтобы центрировать высоту во всех браузерах и разрешениях экрана, вы должны добавить следующие условия к тегу body , в противном случае браузер будет считать, что тело имеет такую ​​же высоту, как его содержимое (т.е. 20px в вашем случае). 

body {
  margin-top:0px;
  margin-left:0px;
  margin-bottom:0px;
  margin-right:0px;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height:100% !important;
  width:100%;
}
0 голосов
/ 28 октября 2011

Вы можете сделать это, установив фиксированную ширину и высоту для содержимого наложения. например: 

.layout #mainContent h6 {
    width:200px;
    height:20px;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top:-10px;   /* half element's height */
    margin-left:-100px; /* half element's width */
    z-index:1000
}

Демо: http://jsfiddle.net/P95Bz/1/

...