0

Всем привет! У меня есть проблема. Элемент спозиционирован не относительно родительского, а относительного другого внешнего элемента. Это сделано, чтобы содержание элемента не срезалось свойством overflow: hidden, которое прописано для родительского элемента. Но при этом необходимо, чтобы его ширина равнялась ширине родительского, а он принимает ширину элемента, относительно которого спозиционирован. Буду рада, если кто-то сможет помочь http://codepen.io/anon/pen/YyLbMb.

<!DOCTYPE HTML>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Тег STYLE</title>
    <style type="text/css">
      .grand-parent {
      position:relative;
      width: 500px;
      height: 200px;
      border: 2px solid green;
      }
      .parent {
      overflow:hidden;
      width: 300px;
      height: 100px;
      border: 2px solid red;
    }
    .child {
    position:absolute; 
    top:0; 
    left:0;
    width: 100%;
    height: 150px;
    border: 2px solid blue;
    }
    </style>
    </head> 
    <body>
    <div class="grand-parent">
      <div class="parent">
        <div class="child"></div>
      </div>
    </div>
  </body>
</html>

1 ответ 1

1

Например через соседний дочерний элемент, который уже будет обрезать контент нужный – http://codepen.io/anon/pen/qOYzKW

.grand-parent {
  position:relative;
  width: 500px;
  height: 200px;
  border: 2px solid green;
}
.parent {
  position: relative;
  
  width: 300px;
  height: 100px;
  border: 2px solid red;
}
.inner {
  overflow:hidden;
  position:absolute; 
  top:0; 
  left:0;
  right: 0;
  bottom: 0;
}
.child {
  position:absolute; 
  top:0; 
  left:0;
  right: 0;
  height: 150px;
  border: 2px solid blue;
  z-index: 1;
}
<div class="grand-parent">
  <div class="parent">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet lorem lorem, sit amet pretium elit malesuada id. Ut velit lectus, commodo ut rhoncus quis, ullamcorper dictum mauris. Morbi pharetra nulla risus, ut maximus leo blandit nec. Vivamus cursus ullamcorper nisl in congue. Vestibulum tortor urna, fermentum vel consectetur at, faucibus a est. Sed placerat risus enim, quis eleifend arcu vestibulum vitae. Vivamus varius mi sit amet tincidunt facilisis. Sed pulvinar nibh sit amet sagittis interdum. Mauris interdum auctor tellus, eu laoreet nisi sagittis at. Quisque et vehicula ipsum. Mauris pulvinar erat sit amet ex sollicitudin, eu finibus justo sodales. Integer sodales pharetra turpis, at fringilla lectus porta nec. Integer id ornare leo. Aliquam eu quam in libero viverra bibendum vel nec ipsum. Etiam faucibus metus at risus consectetur, eu dictum eros efficitur. Donec pulvinar tincidunt magna, vitae luctus orci condimentum ut.
</div>
    <div class="child"></div>
  </div>
</div>

5
  • круто, спасибо большое! сейчас, надеюсь, всё получится!
    – Катя
    29 окт 2015 в 13:19
  • @Катя если ответ вас устроил, слева есть кнопка "Принять ответ"
    – korytoff
    29 окт 2015 в 14:24
  • Что-то не получается так( На самом деле дело в том, что этот элемент с overflow:hidden это div с классом table-responsive из bootstrap, а внутренний элемент - это выпадающий ui-select из angular
    – Катя
    29 окт 2015 в 14:26
  • @Катя тогда может вам поможет jsfiddle.net/88fYK/5
    – korytoff
    29 окт 2015 в 14:31
  • Прошу прощения, что сразу не достаточно четко формулирую вопрос. В таблице может меняться количество столбцов, их содержимое, поэтому четко нельзя определить позиционирование этого элемента. codepen.io/anon/pen/YyLbMb
    – Катя
    29 окт 2015 в 15:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.