отрицательное позиционирование элемента в родительском слое с overflow:auto

117

ETNO

12 апреля 2012, 12:07

1017

Допустим есть два слоя с float:left, обернутые в родительский слой с overflow:auto. У одного из этих слоев есть дочерний слой с абсолютным позиционированием с отрицательным отступом. Проблема в том, что все, что выходит за пределы главного слоя с overflow:auto - обрезается.

когда-то я решил подобную проблему, но как - не могу вспомнить, в гугле ничего не нашел подобного (или не так искал)

Wordpress тема для заработка на партнерках (http://themeforest.net/item/rehub-directory-shop-coupon-affiliate-theme/7646339). Создание каталогов с фильтрацией, расширенный функционал обзоров, layout builder, еженедельное обновление.

[Удален]

12 апреля 2012, 16:58

#1

ETNO:
с абсолютным позиционированием с отрицательным отступом. )

масло масленое.

обернутые в родительский слой с overflow:auto

установите overflow в visible, и будет вам счастье.

117

ETNO

12 апреля 2012, 17:43

#2

profaller:

установите overflow в visible, и будет вам счастье.

я бы не писал сюда, было бы все так просто - при установке visible, основной блок не будет охватывать 2 вложенных блока с float:left, в итоге, фон установленный в этих блоках - будет обрезаться. Т.е. задача оставить overflow:auto

Разве overflow: hidden; влияет Как отследить источник запросов Новая капча Яндекс

136

Jekyll

12 апреля 2012, 19:14

#3

у вас ошибка в самой структуре вёрстки, такой ситуации не должно возникать..

ETNO:
когда-то я решил подобную проблему, но как - не могу вспомнить

Наверное, просто переверстали по-другому? :) Вынесите блок который обрезается из дива с overflow:auto

---------- Добавлено 12.04.2012 в 22:16 ----------

Можно попробовать поднять отр. отступом блок с overflow:auto. И опустить всё кроме блока который обрезался

404

Segey

12 апреля 2012, 19:17

#4

ETNO,

Покажите пример, на словах тяжело воспринимать

и какой именно фон там? картинка?

Brexit - уже совсем рядом. (https://about-this-model.blogspot.com/2019/03/brexit.html)

O

195

ortegas

12 апреля 2012, 19:49

#5

ETNO, замените absolute на relative и позиционируете как хотите (можно попробовать и отрицательный margin).

117

ETNO

12 апреля 2012, 23:43

#6

ortegas:
ETNO, замените absolute на relative и позиционируете как хотите (можно попробовать и отрицательный margin).

не помогло.

Давайте действительно на примере. Вот сайт в разработке moveout.in - смотрите, возле каждого топика есть звездочка добавляющая пост в избранное. В дизайне я сделал её интереснее, и вынес как бы за пределы, вот как грубый пример - http://themefuse.com/demo/wp/writer/. Проблема в том, что переверстать-то можно, но в LS все блоками реализовано, и разнесено по куче шаблонов, класов, экшенов, т.е. это может быть проблематично переверстать, проще оставить как есть. Но все же хотелось бы понять как это делать, уже просто ради интереса.

Малоценная или маловостребованная страница Битрикс / шаблоны meta Яндекс кобласит

154

Joker-jar

13 апреля 2012, 00:09

#7

при установке visible, основной блок не будет охватывать 2 вложенных блока с float:left, в итоге, фон установленный в этих блоках - будет обрезаться

засуньте под два вложенных блока блок нулевой высоты с clear: both;

---------- Добавлено 13.04.2012 в 11:22 ----------

Давайте, более наглядно. Я воссоздал вашу ситуацию: 2 вложенных блока с float-left, один с отрицаительным отступом, который обрезается:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Page</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

      .parent {overflow: auto; width: 300px; margin: 0 auto; background: lime;}

      .left {float: left; width: 100px; border: 1px solid blue;}

      .outer { margin-left: -50px; }

    </style>

  </head>

  <body>

    <div class="parent">

      <div class="left outer">&nbsp;</div>

      <div class="left">&nbsp;</div>

    </div>

  </body> 

</html>

меняем auto на visible и добавляем clearer-блок для того, чтоб родительский натянулся на вложенные:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Page</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

      .parent {overflow: visible; width: 300px; margin: 0 auto; background: lime;}

      .left {float: left; width: 100px; border: 1px solid blue;}

      .outer {margin-left: -50px;}

      .clearer {clear: both; display: block; font-size: 0; line-height: 0;}

    </style>

  </head>

  <body>

    <div class="parent">

      <div class="left outer">&nbsp;</div>

      <div class="left">&nbsp;</div>

      <div class="clearer">&nbsp;</div>

    </div>

  </body> 

</html>

Это довольно распространенный прием. Небольшая заметка о нем на моем сайте тут

117

ETNO

13 апреля 2012, 07:19

#8

Joker-jar, ситуация, что вы описали, немного отличается от моей, но ваш трюк помог, и достаточно прост, чтобы его реализовать. Плюсую вашу карму

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах