Задать вопрос
@Liroton
html

Почему Div block уходит на задний фон?

В общем проблема в следующем - eskv.ru
Баннеры уходят на задний фон, если им выставить в css - position: relative;
То есть они прячутся за слайдером. Пробовал менять параметр у самих баннеров на z-index: 1;
Никаких изменений.
Собственно 2 вопроса:
1) как избавить от проблемы с пропаданием баннеров при смене position?
2) какие еще есть варианты резинового размещения баннеров? на разных мониторах баннеры съезжают по ширине.
  • Вопрос задан
  • 3435 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
Libris
@Libris
Я не знаю поможет вам мой код или нет... Но блок никуда не пропадал он просто уходил вниз и так как у вас у всех блоков стоит overflow hidden его не было видно. Никакой z-index тут и не помог бы. У вас ещё Я смотрю inline-block и float... Используйте всегда только float он кроссбраузерный но для его родителя нужно прописывать класс clfx (стили класса посмотрите в коде) Я добавила ещё див который обворачивает эти блоки с рекламой чтобы нормально центровать. Так как у меня нет кода кроме того что вы кинули Я не могу точно сказать будет он работать или нет на вашем сайте, но если что пишите на почту fugaon@mail.ru. И ещё если у блоков большой общий стиль прописывайте в отдельном классе 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Гипермаркет Маг Уюта</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="mightySlider" />
	<link rel="apple-touch-icon" href="assets/icon/57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="assets/icon/72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="assets/icon/114.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="assets/icon/144.png" />


    <!-- Styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="assets/css/docs.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="src/css/mightyslider.css" rel="stylesheet" />
	<style>
		html, body {
		    height: 100%;
			background: #FFF;

			font-family: Tahoma, 
		}
		/*For clearfix*/
		.banner {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
    position: relative;
	cursor:pointer;
    float: left;
    margin-right: 20px;
}
	.banners{
		margin: 0 auto;
		width: 1057px;
		position: relative;
		top: 41%;
	}
	.clfx:before,
	.clfx:after {
	    content:"";
	    display:table;
	}
	.clfx:after {
	    clear:both;
	}
	.clfx {
	    zoom:1; /* Хак для IE 6 и 7 */
	}
/* /For clearfix*/
		#example {
			overflow: hidden;
			margin-top: 0px;
            height: 100%;
		}
		#example .frame {
			width: 100%;
			height: 100%;
		}
		#example .frame .slide_element {
			height: 100%;
		}
		#example .frame .slide_element > div {
			float: left;
			height: 100%;
			overflow: hidden;
		}
		#example .frame .mSCover img {
			max-width: none;
		}

		#example .frame .slide_element > div .banner1 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
    position:absolute;
	top:41%;
	left:9%;
	cursor:pointer;
	display:inline-block;
}
		#example .frame .slide_element > div .banner2 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_2_1.png); 
    position:absolute;
	top:41%;
	left:26%;
	cursor:pointer;
	display:inline-block;
}
		#example .frame .slide_element > div .banner3 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_3_1.png); 
    position:absolute;
	top:41%;
	left:43%;
	cursor:pointer;
    display:inline-block;
}
		#example .frame .slide_element > div .banner4 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
    position:absolute;
	top:41%;
	left:60%;
	cursor:pointer;
    display:inline-block;
}
	</style>


  </head>

  <body>
	<div id="example" class="mightyslider_modern_skin">
				<div class="frame" >
				<div class="slide_element clfx" >
				<!--первая страница-->
				<div class="slide clfx" data-mightyslider="cover: 'assets/img/photos/image_1.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false">
				<!--вторая строка баннеров-->
				<div class="banners clfx">
                    <div class="banner" onclick="location.href='http://bears.maguyuta.ru';"></div>
                    <div class="banner"></div>
                    <div class="banner"></div> 
                    <div class="banner"></div>
                </div>
				</div>

				<!--вторая страница-->
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_2.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false"> 
				<!--третья страница-->
				</div>
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_3.png'" oncopy="return false" ondragstart="return false" onselectstart="return false">
				
				</div>
			
			</div>
			
		</div>
	</div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/css_browser_selector.min.js"></script>
    <script src="assets/js/jquery.js"></script>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	<script type="text/javascript" async="" defer="" src="http://iprodev.com/projects.php?p=mightyslider"></script>
    <script src="assets/js/jquery.mobile.just-touch.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="src/js/mightyslider.js"></script>
    <script>
		eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}('$(4).e(2(){3 a=$("#5");$(".6",a).7({8:9,b:"c",d:1,f:"g",h:{i:"j%",k:"l"},m:{n:0.1},o:{p:1}})});',26,26,"  function var document example frame mightySlider speed 1E3  easing easeOutExpo autoScale ready viewport stretch navigation slideSize 100 keyboardNavBy slides dragging swingSpeed commands buttons".split(" "),
		0,{}));

		
    </script>
  </body>
</html>
Ответ написан
Комментировать
Комментировать
shiza36
@shiza36
1) Сделать для слайдера тоже position.
2) почитайте про адаптивность и резину, без кода ответа не дать.
Ответ написан
Комментировать
Комментировать
@Liroton Автор вопроса
Код
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Гипермаркет Маг Уюта</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="mightySlider" />
	<link rel="apple-touch-icon" href="assets/icon/57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="assets/icon/72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="assets/icon/114.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="assets/icon/144.png" />


    <!-- Styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="assets/css/docs.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="src/css/mightyslider.css" rel="stylesheet" />
	<style>
		html, body {
		    height: 100%;
			background: #FFF;

			font-family: Tahoma, 
		}
		#example {
			overflow: hidden;
			margin-top: 0px;
            height: 100%;
		}
		#example .frame {
			width: 100%;
			height: 100%;
		}
		#example .frame .slide_element {
			height: 100%;
		}
		#example .frame .slide_element > div {
			float: left;
			height: 100%;
			overflow: hidden;
		}
		#example .frame .mSCover img {
			max-width: none;
		}

		#example .frame .slide_element > div .banner1 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
    position:absolute;
	top:41%;
	left:9%;
	cursor:pointer;
	display:inline-block;
}
		#example .frame .slide_element > div .banner2 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_2_1.png); 
    position:absolute;
	top:41%;
	left:26%;
	cursor:pointer;
	display:inline-block;
}
		#example .frame .slide_element > div .banner3 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_3_1.png); 
    position:absolute;
	top:41%;
	left:43%;
	cursor:pointer;
    display:inline-block;
}
		#example .frame .slide_element > div .banner4 {
    width: 244px; 
	height: 161px;
    background: url(http://eskv.ru/assets/img/photos/banner_1_1.png); 
    position:absolute;
	top:41%;
	left:60%;
	cursor:pointer;
    display:inline-block;
}
	</style>


  </head>

  <body>
	<div id="example" class="mightyslider_modern_skin">
				<div class="frame" >
				<div class="slide_element" >
				<!--первая страница-->
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_1.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false">
				<!--вторая строка баннеров-->
                    <div class="banner1" onclick="location.href='http://bears.maguyuta.ru';"></div>
                    <div class="banner2"></div>
                    <div class="banner3"></div> 
                    <div class="banner4"></div> 
				</div>

				<!--вторая страница-->
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_2.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false"> 
				<!--третья страница-->
				</div>
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_3.png'" oncopy="return false" ondragstart="return false" onselectstart="return false">
				
				</div>
			
			</div>
			
		</div>
	</div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/css_browser_selector.min.js"></script>
    <script src="assets/js/jquery.js"></script>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	<script type="text/javascript" async="" defer="" src="http://iprodev.com/projects.php?p=mightyslider"></script>
    <script src="assets/js/jquery.mobile.just-touch.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="src/js/mightyslider.js"></script>
    <script>
		eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}('$(4).e(2(){3 a=$("#5");$(".6",a).7({8:9,b:"c",d:1,f:"g",h:{i:"j%",k:"l"},m:{n:0.1},o:{p:1}})});',26,26,"  function var document example frame mightySlider speed 1E3  easing easeOutExpo autoScale ready viewport stretch navigation slideSize 100 keyboardNavBy slides dragging swingSpeed commands buttons".split(" "),
		0,{}));

		
    </script>
  </body>
</html>
Ответ написан
Комментировать
Комментировать
@vkrzt
задай z-index:999;

у него чем выше число, тем выше по слоям находится элемент.
Ответ написан
Комментировать
Комментировать
@Liroton Автор вопроса
Проблему так и не смогу решить. Убрал position, перестроил div-блоки, изменял z-index. Результат никакой
Код
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Гипермаркет Маг Уюта</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="mightySlider" />
	<link rel="apple-touch-icon" href="assets/icon/57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="assets/icon/72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="assets/icon/114.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="assets/icon/144.png" />


    <!-- Styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="assets/css/docs.css" rel="stylesheet" />
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="src/css/mightyslider.css" rel="stylesheet" />
	<style>
		html, body {
		    height: 100%;
			background: #FFF;
			font-family: Tahoma, 
		}
		#example {
			overflow: hidden;
			margin-top: 0px;
            height: 100%;
		}
		#example .frame {
			width: 100%;
			height: 100%;
		}
		#example .frame .slide_element {
			height: 100%;
		}
		#example .frame .slide_element > div {
			float: left;
			height: 100%;
			overflow: hidden;
		}
		#example .frame .mSCover img {
			max-width: none;
		}
        .floatedblock1 {
        float:left;
		display:inline;
        margin:5px;
        width:244px; 
		height:161px;
		z-index: 10005;
		margin:22% 0px 0px 9%;
        }
        .floatedblock {
        float:left;
		display:inline;
        margin:10px;
        width:244px; 
		height:161px;
		z-index: 10005;
		margin:22% 0px 0px 0px;
        }
    .clear {
        clear:both;display:block;
        height:0px;font-size:0;
        overflow:hidden;
        }
 
	</style>


  </head>

  <body>

	<div id="example" class="mightyslider_modern_skin">
				<div class="frame" >
				<div class="slide_element" >
				<!--первая страница-->
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_1.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false">
				
				<!--первая строка баннеров-->
  <div class="floatedblock1"><img src="http://eskv.ru/assets/img/photos/banner_1_1.png"/></div>
<div class="floatedblock"><img src="http://eskv.ru/assets/img/photos/banner_2_1.png"/></div>
<div class="floatedblock"><img src="http://eskv.ru/assets/img/photos/banner_3_1.png"/></div>
<div class="clear"></div>
</div>
				<!--вторая страница-->
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_2.png'"  oncopy="return false" ondragstart="return false" onselectstart="return false"> 
				<!--третья страница-->
				</div>
				<div class="slide" data-mightyslider="cover: 'assets/img/photos/image_3.png'" oncopy="return false" ondragstart="return false" onselectstart="return false">
				
				</div>
			
			</div>
			
		</div>
	</div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="assets/js/css_browser_selector.min.js"></script>
    <script src="assets/js/jquery.js"></script>
	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	<script type="text/javascript" async="" defer="" src="http://iprodev.com/projects.php?p=mightyslider"></script>
    <script src="assets/js/jquery.mobile.just-touch.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/jquery.easing.1.3.js"></script>
    <script src="src/js/mightyslider.js"></script>
    <script>
		eval(function(d,f,a,c,b,e){b=function(a){return a.toString(f)};if(!"".replace(/^/,String)){for(;a--;)e[b(a)]=c[a]||b(a);c=[function(a){return e[a]}];b=function(){return"\\w+"};a=1}for(;a--;)c[a]&&(d=d.replace(RegExp("\\b"+b(a)+"\\b","g"),c[a]));return d}('$(4).e(2(){3 a=$("#5");$(".6",a).7({8:9,b:"c",d:1,f:"g",h:{i:"j%",k:"l"},m:{n:0.1},o:{p:1}})});',26,26,"  function var document example frame mightySlider speed 1E3  easing easeOutExpo autoScale ready viewport stretch navigation slideSize 100 keyboardNavBy slides dragging swingSpeed commands buttons".split(" "),
		0,{}));

		
    </script>
  </body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Подобрать картинки для каталога
27 апр. 2024, в 06:40
2000 руб./за проект
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Ещё заказы