Непонятки с позицией

@Inkvizzz · Регистрация: 09.10.2012

Доброго времени суток! Имеется такой html и css код показывается только 1 из картинок а не все 3

HTML5

<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/css/auth.css">
<title>elinar</title>
</head>
<body>
<div id="wrapper">
   <div id="header">
   </div>
   <div id="main">
   <div id="roundSliceOne"><img src="https://www.cyberforum.ru/images/round.png" width="964" height="500" usemap="#round"></div>
   <div id="roundSliceTwo"><img src="https://www.cyberforum.ru/images/round2.jpg" width="964" height="500" usemap="#round"></div>
   <div id="roundSliceThree"><img src="https://www.cyberforum.ru/images/round3.jpg" width="964" height="500" usemap="#round"></div>
   </div>
</div>

CSS

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
 font-family: Arial, Verdana, sans-serif;
 min-width:964px;
 max-width:1920px;
 min-height:600px;
}
#wrapper {
    width: 964px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; 
    /*for IE */
    zoom:1;
    
}
#header {
    width: 964px;
    height: 100px;
    background-color:black;
}
#main {
width:964;
height:500px;
margin-top:50px;
}
#roundSliceOne {
position:absolute;
z-index:1;
}
#roundSliceTwo {
position:absolute;
z-index:2;
}
#roundSliceThree {
position:absolute;
z-index:3;
}

@zme9 · 05.03.2014, 14:05

Ну так они лежат одна на одной , не ?

@maximus2011 · 05.03.2014, 17:09

так они у вас и лежат друг на друге ) поэтому показывается та, которая сверху. У вас для этого даже z-index прописан, что бы они так показывались.

@dolte · 05.03.2014, 18:05

используйте absolute только в действительно безвыходных ситуациях.

Не по теме:

я в своих проектах стараюсь не использовать его вообще

@Inkvizzz · 05.03.2014, 19:33 **[ТС]**

разобрался,в итоге надо все в png было

@maximus2011 · 05.03.2014, 22:45

если правильно исползовать position:absolute; то это свойство очень и очень полезно, я его всегда пользую ))

@maximus2011 · 07.03.2014, 10:21

Вот нарыл в инете одну из немногих тем, в которой понятно про абсолютную позицию

http://radiomarkup.ru/ncss/ncs... -jelementa

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	05.03.2014, 14:05	2
	Ну так они лежат одна на одной , не ? 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.03.2014, 17:09	3
	так они у вас и лежат друг на друге ) поэтому показывается та, которая сверху. У вас для этого даже z-index прописан, что бы они так показывались. 0

@dolte Человек 325 / 199 / 63 Регистрация: 04.02.2013 Сообщений: 1,200
	05.03.2014, 18:05	4
	используйте absolute только в действительно безвыходных ситуациях. Не по теме: я в своих проектах стараюсь не использовать его вообще 1

@Inkvizzz 31 / 45 / 21 Регистрация: 09.10.2012 Сообщений: 815
	05.03.2014, 19:33 [ТС]	5
	разобрался,в итоге надо все в png было 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.03.2014, 22:45	6
	если правильно исползовать position:absolute; то это свойство очень и очень полезно, я его всегда пользую )) 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	07.03.2014, 10:21	7
	Сообщение было отмечено Inkvizzz как решение Решение Вот нарыл в инете одну из немногих тем, в которой понятно про абсолютную позицию http://radiomarkup.ru/ncss/ncs... -jelementa 0

Опции темы

Непонятки с позицией

Решение