Question

我试图制作一个滑块。我的div是＃foo，＃bar和#text。

#foo是容器div

#bar是#foo内的彩色div。它用可变百分比宽度填充它。

#text是#foo内的透明div（文本除外）。它应该高于#bar。

如何使用CSS实现这一目标？我的代码目前看起来像这样：

＆＃13;

#foo {
  background: red;
  width: 100px;
  height: 20px;
  z-index: 1;
}

#bar {
  background: green;
  width: 50px;
  float: left;
  height: 20px;
  z-index: 2;
}

#text {
  z-index: 3;
}

＆＃13;

<div id="foo">
  <div id="bar"></div>
  <div id="text">
    Some text.
  </div>
</div>

＆＃13;

Answer 1

简单地使外框定位relative，使子元素相对到外框，然后将这些元素absolute放在其父元素中。给两个内盒左上角的位置。现在您的z-index将起作用，请查看此修改后的代码段：

#foo {
  background: red;
  width: 100px;
  height: 20px;
  z-index: 1;
  position: relative;
}

/* Combined these since they share a lot in common */
#bar, #text {
  /* Made width and height 100% as they are relative to the parent size now */
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

#bar {
  background: green;
  width: 50px;
}

#text {
  z-index: 1;
}

<div id="foo">
    <div id="bar"></div>
    <div id="text">
        Some text.
    </div>
</div>

Answer 2

这样的东西？

#slider {
  width: 200px;  
  height: 30px;
  background-color: black;
  position: relative;
}

#percentage {
  color: white;
  line-height: 30px;
  margin-left: 10px;
  position: absolute;
}

#bar {
  width: 75%;
  height: 30px;
  background-color: red;
  position: absolute;
}

<div id="slider">
  <div id="bar">
  </div>
  <div id="percentage">75%</div>
</div>

Answer 3

下面将填充悬停时的加载栏 - 您可能希望将jQuery用于更广泛的事件处理程序：

;WITH Maxtable1
    AS (SELECT attribute
            , name
            , MAX(t.date) AS MaxDate
        FROM   table1
        GROUP BY attribute
             , name),
    Maxtable2
    AS (SELECT attribute
            , name
            , MAX(t.date) AS MaxDate
        FROM   table2
        GROUP BY attribute
             , name),
             .
             .
             .
    Maxtable<n>
    AS (SELECT attribute
            , name
            , MAX(t.date) AS MaxDate
        FROM   table<n>
        GROUP BY attribute
             , name),
    DetailTable1
    AS (SELECT id
            , attribute
            , name
            , date
        FROM   table1
             INNER JOIN Maxtable1 ON table1.attribute = Maxtable1.attribute
                                AND table1.name = Maxtable1.name
                                AND table1.date = Maxtable1.date),
    DetailTable2
    AS (SELECT id
            , attribute
            , name
            , date
        FROM   table2
             INNER JOIN Maxtable2 ON table2.attribute = Maxtable2.attribute
                                AND table2.name = Maxtable2.name
                                AND table2.date = Maxtable2.date),
             .
             .
             .
    DetailTable<n>
    AS (SELECT id
            , attribute
            , name
            , date
        FROM   table<n>
             INNER JOIN Maxtable<n> ON table<n>.attribute = Maxtable<n>.attribute
                                AND table<n>.name = Maxtable<n>.name
                                AND table<n>.date = Maxtable<n>.date)
    SELECT *
    FROM   DetailTable1
    UNION
    SELECT *
    FROM   DetailTable2
    UNION
    .
    .
    .
    SELECT *
    FROM   DetailTable<n>;

试图制作包含文本的滑块

3 个答案: