Absolute & Relative

Я играю с обоими, и я все еще не могу понять их.Absolute & Relative

Когда я пытаюсь сделать все, чтобы сосредоточиться независимо от разрешения экрана, на которое вы смотрите, я обычно устанавливаю ширину с 0 авто. НО - Если у меня такое же свойство с абсолютным, оно полностью игнорирует это значение и не работает.

Итак, как именно я должен позиционировать изображение в верхней части другого изображения, не заставляя его сосредоточиться на всех разрешениях экрана, так как WELL не использует абсолютный?

EDIT: Я пытаюсь получить маленький виджет новостей и виджет teampeak, чтобы оставаться посередине тела.

HTML

<body> 
<div id="page-wrap"> 
    <div id="header"> 
     <img src="images/header.png" /> 
    </div> 
    <img src="images/navbar.png" /> 
    <ul id="nav"> 
     <li><a href="http://www.voyage-us.com">Home</a></li> 
     <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li> 
     <li><a href="http://www.google.com">Members</a></li> 
     <li><a href="http://www.google.com">Streams</a></li> 
     <li><a href="http://www.google.com">Contact Us</a></li> 
    </ul> 
    <div id="mainbody"> 
     <img src="images/mainbody.png" /></div> 

    <div class="news1"> 
     <img src="images/news1.png" /></div> 

    <div class="teamspeak"> <!--Teamspeak IMG--> 
     <img src="images/teamspeak.png" /></div> 

    <div id="ts3viewer_1037062" /></div> <!-- Teamspeak Widget --> 

     <script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script> 

     <script type="text/javascript"> 
     <!-- 
     var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1037062&text=000000&text_size=12&text_family=2&js=1&text_s_color=ffffff&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=ffffff&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=ffffff&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=ffffff&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=ffffff&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=ffffff&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=ffffff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=ffffff&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none"; 
     ts3v_display.init(ts3v_url_1, 1037062, 100); 
     --> 
     </script> 

    <div id="footer"> 
     <p>&copy;2014 Rythmn Designs<p> 
</div> 
</body>

CSS

body 
{ 
margin: 0px; 
padding: 0px; 
background: url("http://puu.sh/6RlKi.png") 
} 

.clear 
{ 
clear:both; 
} 

#page-wrap 
{ 
width: 1019px; 
margin: 0 auto; 
} 

#header 
{ 
width:100%; 
text-align: center; 
display: block; 
} 

#nav 
{ 
height: 0.1px; 
list-style: none; 
padding-left: 14px; 
text-align: center; 
padding-bottom: 0px; 
margin: -14px; 
margin-top: -15px; 
} 

#nav li a 
{ 
position:relative; 
top: -12px; 
display: block; 
width: 100px; 
float: left; 
color: white; 
font-size: 14.09px; 
text-decoration: none; 
font-family:"BankGothic Md BT" 
} 

#nav li a:hover, #nav li a:active 
{ 
color: red; 
} 

#mainbody 
{ 
vertical-align:top; 
position:relative 
} 

.news1 
{ 
position: absolute; 
top: 435px; 
right: 815px 
} 

.teamspeak 
{ 
position: absolute; 
top: 435px; 
right: 470px 

} 

#ts3viewer_1037062 
{ 
position:absolute; 
top: 465px; 
right: 478px; 
width: 290px; 
height:190px; 
overflow:auto; 
} 

#footer 
{ 
background: #181818; 
color: white; 
padding: 20px 0 20px 0; 
text-transform: uppercase; 
border-top: 15px solid #828080; 
text-align: center; 
font-family:"BankGothic Md BT"; 
font-size: 12px; 
position: relative; 
}

источник

2014-02-16 user3294450

Пожалуйста, разместите свой HTML-код и CSS, которые у вас есть. – Beel

Вы могли бы это сделать по-другому и использовать вложенные <DIV> теги, такие как:

<div id="outer"> 
    <div id="inner"> 
    </div> 
</div>

А затем добавить свои изображения в CSS. См. jsFiddle.

источник

2014-02-16 01:52:40 Ryan

Это помогло, спасибо. – user3294450

Для абсолютно позиционированного элемента, предполагая, что фиксированная ширина

left: 50%; 
margin-left: -[width/2];

left помещает свою левую границу в середине экрана; отрицательный margin тянет его влево на половину его ширины, центрируя его.

absolute позиционирования позволяет top, right, bottom, left свойства должны быть определены по отношению к окну или содержащий элемент.

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

источник

2014-02-16 01:50:14 Mathletics

Благодарим вас за объяснение. – user3294450

Absolute & Relative

ответ

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