Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Абсолютное позиционирование за пределы родителя и IE / 23 сообщений из 23, страница 1 из 1
03.10.2012, 18:05:07
    #37982470
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
Уверена, вопрос из разряда азбучных, но не знаю, как правильно сформулировать запрос в поиске.
Нужно абсолютно спозиционировать блок, сдвинув его вниз визуально за пределы блока-родителя. Делаю так:
Код: 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:10:27
    #37982479
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
son6ka, нормальный тестовый пример сделайте.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 18:22:12
    #37982504
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
К сожалению верстка на локальном хосте.
Дизайн:
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 18:30:22
    #37982517
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
son6ka,

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

возможно, какой-то другой css сделал его hidden
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 18:31:11
    #37982520
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
даже лучше overflow: visible !important;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 18:37:21
    #37982534
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
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:42:53
    #37982543
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
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:44:05
    #37982546
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
а может, опять дело в отсутствии <!DOCTYPE HTML>, как в соседнем топике
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 18:53:32
    #37982557
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
Яростный Мечдаже лучше 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:56:09
    #37982563
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
С доктайпом все в порядке.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 19:08:03
    #37982573
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
son6kaВот проблемный кусокНе наблюдаю обрезания в IE9 :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 19:08:49
    #37982575
son6ka
son6ka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
Я проверяю в 7, 8.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 19:10:15
    #37982576
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
son6ka, может у Вас всё-таки список, то есть несколько подряд идущих <section>?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.10.2012, 19:10:38
    #37982577
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Абсолютное позиционирование за пределы родителя и IE
son6ka,

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


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