ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Абсолютное позиционирование за пределы родителя и IE
23 сообщений из 23, страница 1 из 1
Абсолютное позиционирование за пределы родителя и IE
    #37982470
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Уверена, вопрос из разряда азбучных, но не знаю, как правильно сформулировать запрос в поиске.
Нужно абсолютно спозиционировать блок, сдвинув его вниз визуально за пределы блока-родителя. Делаю так:
Код: css
1.
2.
3.
4.
5.
.slider-cont{
    position: relative;
    width: 940px;
    margin: 0 auto;
}


Код: css
1.
2.
3.
4.
5.
6.
.slider{
    position:absolute;
    height:340px;
    width: 100%;
    top: 22px;
}



В IE родитель обрезает ту часть .slider, которая выходит за его границу. Как победить?
...
Рейтинг: 0 / 0
03.10.2012, 18:05:07
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982479
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6ka, нормальный тестовый пример сделайте.
...
Рейтинг: 0 / 0
03.10.2012, 18:10:27
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982504
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
К сожалению верстка на локальном хосте.
Дизайн:
...
Рейтинг: 0 / 0
03.10.2012, 18:22:12
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982517
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
son6ka,

добавь overflow: visible; для .slider-cont

возможно, какой-то другой css сделал его hidden
...
Рейтинг: 0 / 0
03.10.2012, 18:30:22
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982520
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
даже лучше overflow: visible !important;
...
Рейтинг: 0 / 0
03.10.2012, 18:31:11
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982534
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6kaК сожалению верстка на локальном хосте.И из-за этого сделать пример крайне сложно :)
Скорее всего Яростный Меч прав, т.к. в IE всё нормально:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE HTML>
<html>  
  <head>
    <style>
      .slider-cont {
        background-color: #151515;
        color: #f7fa25;
        height: 340px;
        margin: 0 auto;
        position: relative;
        width: 340px;
      }
      .slider {
        background-color: #009bc7;
        left: 100px;
        position: absolute;
        height: 340px;
        width: 100%;
        top: 22px;
      }
    </style>
  </head>  
  <body>
    <div class="slider-cont">.slider-cont
      <div class="slider">.slider</div>
    </div>
  </body>
</html>
...
Рейтинг: 0 / 0
03.10.2012, 18:37:21
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982543
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6ka, также возможно у Вас список элементов, тогда так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE HTML>
<html>  
  <head>
    <style>
      .slider-cont {
        background-color: #151515;
        color: #f7fa25;
        height: 340px;
        margin: 2px auto;
        width: 340px;
      }
      .slider-cont:hover .slider {
        display: block;
      }
      .slider-container {
        position: relative;
        height: 0px;
      }
      .slider {
        background-color: #009bc7;
        display: none;
        left: 100px;
        position: absolute;
        height: 340px;
        width: 100%;
        top: 22px;
      }
    </style>
  </head>  
  <body>
    <div class="slider-cont">.slider-cont one
      <div class="slider-container">
      	<div class="slider">.slider one</div>
      </div>
    </div>
    <div class="slider-cont">.slider-cont two
      <div class="slider-container">
      	<div class="slider">.slider two</div>
      </div>
    </div>
  </body>
</html>
...
Рейтинг: 0 / 0
03.10.2012, 18:42:53
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982546
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
а может, опять дело в отсутствии <!DOCTYPE HTML>, как в соседнем топике
...
Рейтинг: 0 / 0
03.10.2012, 18:44:05
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982557
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Яростный Мечдаже лучше overflow: visible !important;
Это первое, что я сделала, пока сама ковырялась - не помагает.
skyANA, я думала, нормальный пример - это верстка на доступном хостинге.

Вот проблемный кусок:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<section class="content-top">
    <div class="slider-wrap">
        <div class="slider-cont wraper">
	    <div class="slider">
	        <img src="" alt="">
		<nav class="slider-nav">
		    <ul>
		        <li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		    </ul>
		</nav>
	    </div>
	    <div class="slogan">
		<p>
	            Lorem ipsum dolor sit amet, consectetur adipisicing eli
		</p>
	    </div>
	</div>
    </div>
</section>


Стили:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
.content-top{
	margin-bottom: 100px;
}

.slider-wrap{
	height: 337px;
	width: 100%;
	position: relative;
}

.slider-cont{
	position: relative;
}

.slider{
	height:340px;
	width: 100%;
	border: 1px solid #c6c6c6;
	position:absolute;
	top: 22px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	behavior: url(css/PIE.htc);
}

.slogan{
	color: #000000;
	position: absolute;
	top: 165px;
}
...
Рейтинг: 0 / 0
03.10.2012, 18:53:32
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982563
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
С доктайпом все в порядке.
...
Рейтинг: 0 / 0
03.10.2012, 18:56:09
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982573
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6kaВот проблемный кусокНе наблюдаю обрезания в IE9 :)
...
Рейтинг: 0 / 0
03.10.2012, 19:08:03
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982575
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Я проверяю в 7, 8.
...
Рейтинг: 0 / 0
03.10.2012, 19:08:49
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982576
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6ka, может у Вас всё-таки список, то есть несколько подряд идущих <section>?
...
Рейтинг: 0 / 0
03.10.2012, 19:10:15
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982577
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
son6ka,

а в какой версии ИЕ проблемы? Если 8, то там по F12 отладчик выскакивает, в нем можно посмотреть, к каким элементам какие стили применились.
у меня недавно обратная проблема была - не обрезалось. ) position: relative; помог
...
Рейтинг: 0 / 0
03.10.2012, 19:10:38
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982579
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
skyANA, да, несколько section. Для остальных стилей пока нет вообще.
...
Рейтинг: 0 / 0
03.10.2012, 19:12:16
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982580
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6kaЯ проверяю в 7, 8.В IE7 тоже не наблюдаю :)
...
Рейтинг: 0 / 0
03.10.2012, 19:12:42
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982583
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6kaskyANA, да, несколько section. Для остальных стилей пока нет вообще.А если закомментировать остальные и оставить только "content-top", то проблема наблюдается?
...
Рейтинг: 0 / 0
03.10.2012, 19:14:35
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982585
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6ka, возможно не родитель обрезает, а содержимое следующего элемента section :)
...
Рейтинг: 0 / 0
03.10.2012, 19:15:59
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982589
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Попробуйте так:
Код: css
1.
2.
3.
4.
5.
.slider-wrap{
	height: 337px;
	width: 100%;
	position: static;
}
...
Рейтинг: 0 / 0
03.10.2012, 19:18:53
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982590
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
skyANA,да, position: static работает. Большое спасибо. А в чем была проблема не подскажете?
...
Рейтинг: 0 / 0
03.10.2012, 19:21:21
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982592
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
На пальцах: возможно в элементе section, что идёт после "content-top", имеется элемент с position: relative. Тогда этот элемент "выше" "slider-wrap", и всё, что находится в "slider-wrap", то будет "ниже" него :)
...
Рейтинг: 0 / 0
03.10.2012, 19:23:09
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982596
son6ka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
son6ka
Участник
Еще раз спасибо. Пошла учить матчасть. :)
...
Рейтинг: 0 / 0
03.10.2012, 19:25:28
| Ответить | Цитировать | Написать  
Абсолютное позиционирование за пределы родителя и IE
    #37982603
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
son6ka, я приводил пример: 13263690
В нём .slider one залезает под .slider-cont two, но мы этого не видим, т.к. .slider-cont имеет нулевую высоту :)
...
Рейтинг: 0 / 0
03.10.2012, 19:28:22
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Абсолютное позиционирование за пределы родителя и IE
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=37982504&tid=1449275]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 206ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 241ms
total:  544ms
созд. / загр.: 544ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]