Как переместить элемент относительно элемента сверху, который изменяется по высоте

Question

Как переместить элемент относительно элемента сверху, который изменяется по высоте

0

Я добавил ленточный эффект для своего h3, который выглядит так, как будто он обернут вокруг моего div. Я просто добавил маленький треугольник сбоку и приказал, чтобы он был ниже div и h3. Я установил ширину h3 для 270px, и лента отлично выглядит, мой h3 является однострочным, но когда слова занимают 2 или 3 строки, h3 расширяется по высоте и блокирует треугольник.

Есть ли способ заставить треугольник двигаться вместе с высотой h3?

Fiddle: введите ссылку здесь.

<div class="gray-bg">
   <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
   <div class="triangle-l"></div>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet velit euismod, imperdiet purus a, semper eros. Aliquam lacinia tellus nec justo condimentum euismod non et dolor. Ut sit amet eleifend turpis. Pellentesque in adipiscing risus. Vivamus non accumsan nisl. Nulla accumsan velit ipsum, at aliquam arcu consectetur in. Integer vestibulum nunc a odio accumsan vehicula. Nunc at metus ullamcorper justo bibendum hendrerit. Aenean sit amet porttitor urna. Sed bibendum velit sed est eleifend, non cursus arcu hendrerit.
   </p>                  
</div>

Также мой z-index действует странно. Треугольник имеет z-индекс 1, div имеет 50, а h3 имеет 100... но треугольник все еще находится на вершине div, когда он должен быть внизу.

* Не уверен, что лучший подход - CSS или jquery - поэтому я помечаю оба.

nutellafella 14 март 2014, в 05:22

Источник

Теги:

html

css

5 ответов

0

Сделать позицию relative и отрегулировать top и left

Сценарий: http://jsfiddle.net/feZbL/

.gray-bg .triangle-l{
    border-color: transparent #4678A1 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0;
    width:0;
    position: relative;
    top: -48px;
    left: -49px;
    z-index: 1;
}

SajithNair 14 март 2014, в 02:42

0

благодарю вас! я чувствую себя глупым, я должен был знать, что это как-то связано с положением.
nutellafella 14 март 2014, в 04:31

0

Переместите треугольник в h3 и поместите его относительно bottom а не top.

http://jsfiddle.net/4pnXp/

Обратите внимание, что для этого вам нужно изменить z-index треугольника на -1 чтобы -1 его за h3.

Для бонусных очков вы также можете полностью .triangle-l элемент .triangle-l и использовать :after псевдоэлемента, чтобы создать триагл!

http://jsfiddle.net/kE27U/

doctororange 14 март 2014, в 02:06

0

проверьте свое решение Demo jsFiddle

Обновить .gray-bg.triangle-l

.gray-bg .triangle-l{
    border-color: transparent #4678A1 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0;
    width:0;
    position: absolute;
    bottom: -15px;
    left: -15px;
    z-index: -1;
}

Jay Patel 14 март 2014, в 01:26

0

Моим решением было обернуть h3 и треугольник в div, а затем поместить его относительно

http://jsfiddle.net/MKMs6/8/

<div class="wrap">
    <h3>Lorem ipsum</h3>
    <div class="triangle-l"></div>
</div>

user3211562 14 март 2014, в 01:19

Ещё вопросы

благодарю вас! я чувствую себя глупым, я должен был знать, что это как-то связано с положением.

davidpauljunior · Accepted Answer · 2014-03-14T03-09-00.000Z

Я думаю, что я использовал бы другой подход и создаю псевдоэлемент <h3> для создания треугольника. Кроме того, вы можете сделать треугольник точной фигурой, которую хотите, то есть не нужно, чтобы z-index скрывал верхнюю половину, и вы можете позиционировать ее top: 100% означает, что она всегда правильная, независимо от содержания в <h3>.

HTML:

<div class="gray-bg">
  <h3>Lorem ipsum</h3>
  <p>...<p>
</div>

CSS:

.gray-bg h3:after {
  content:'';
  display: block;
  border-color: transparent #4678A1 transparent transparent;
  border-style:solid;
  border-width: 0 15px 15px 0;
  height:0;
  width:0;
  position: absolute;
  top: 100%;
  left: 0;
}

демонстрация

конечно!! я всегда забываю: после! большое спасибо!