Нужен родительпокрыть ЧАСТЬ ребенкаиспользуя CSS - PullRequest
Новая
       3

Нужен родительпокрыть ЧАСТЬ ребенкаиспользуя CSS

0 голосов
/ 13 декабря 2011

Я пытаюсь создать индикатор выполнения с разделителем, который разделяет разделы. Этот разделитель (дочерний элемент <div/>) висит ниже индикатора выполнения (родительский элемент <div/>). Таким образом, я хочу, чтобы индикатор выполнения покрывал всю панель делителя, кроме части, которая висит ниже.

Вот очень упрощенное представление: 

<html>
  <head>
    <style>

      body {
        width:500px;
        margin:0 auto;
        }
      #parent {
        width:50%;
        height:30px;
        background-color: yellow;
        }
      #child {
        width:1px;
        height:50px;
        background-color:black;
        float:right;
        margin-right:100px;
        }

    </style>
  </head>
  <body>

    <div id="parent">
      <div id="child"></div>
    </div>

  </body>
</html>

Как получить желтую часть индикатора выполнения до , чтобы закрыть пересекающуюся часть разделительной панели?

Вот изображение, представляющее то, что я ищу:

divider hangs below bar and is covered where they intersect by the bar/parent

Заранее спасибо!

Ответы [ 4 ]

2 голосов
/ 13 декабря 2011

Не знаю, если я правильно понял, но почему бы вам просто не дать дочернему элементу маржинальную вершину? (и уменьшите рост дочернего элемента div)

http://jsfiddle.net/7SMuJ/

если это не вариант, вам нужно переставить элементы, чтобы вы могли использовать z-index

1 голос
/ 13 декабря 2011

Установка родителя в положение: относительное позволит вам абсолютно позиционировать маркер.Так как они оба были бы подходящими типами для z-index, я бы выбрал этот путь.Вот jsfiddle:

http://jsfiddle.net/WXDZF/

Кажется, самое чистое решение.В этом случае вы действительно пытаетесь что-то позиционировать, а не толкать что-либо вверх или вниз, поэтому я бы рекомендовал не использовать поле неорганическим образом.

1 голос
/ 13 декабря 2011

Вы можете просто установить оверлей на другой контейнер 

#parent {
    width:50%;
    height:30px;

    }
  .innerParent{
     background-color: yellow;
        width:100%;
        position:absolute;
         top:0;
        left:0;
         display:block;
         height:30px;
    }
  #child {
    width:1px;
    height:50px;
    background-color:black;
    float:right;
    margin-right:100px;
    z-index:1;

    }

разметка 

  <div id="parent">
<div class="innerParent">
</div>
  <div id="child"></div>
</div>
0 голосов
/ 13 декабря 2011

Вы должны изменить параметры от ребенка к родителю и наоборот, см. Ниже. 

  #parent {
    width:100px;
    height:30px;
    background-color: yellow;
    }
  #child {
    width:50%;
    height:30px;
    background-color:black;
    float:right;
    }
...