CSS Position元素相对于另外两个

时间:2015-05-30 15:21:02

标签: html css

是否可以仅使用CSS将元素水平放置在一个元素上并垂直放置到另一个元素上? 我正在尝试向导航栏添加下拉菜单。但是,子菜单未正确对齐。 我想定位元素A,使其左边缘与元素B的左边缘对齐,但我希望元素A的上边缘与元素C的下边缘对齐。

基本上,我希望它在标题下,与列表元素(图像编辑)对齐:

enter image description here

我有以下代码:



#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}

<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

现在,为了使定位做一些事情,我必须选择要进行定位的元素。但是,如果我使用list元素,子菜单将会太长,因为它位于list元素下,并且标题有一些填充。

#header li {
    position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}

&#13;
&#13;
#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
  position: relative;       /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}
&#13;
<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

结果是:与列表元素对齐

enter image description here

如果我用标题做,那么子菜单将与整个标题的左边对齐,这不是我想要的。

#header {
    position: relative; /* Positioning will be relative to the HEADER */
}

&#13;
&#13;
#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
  position: relative;       /* Positioning will be relative to the HEADER */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;       /* Enables positioning */
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  left: 0;                  /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li:hover>.submenu{
  display: block;           /* Shows the submenu */
}
&#13;
<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

这就是它的样子:在标题下

enter image description here

所以,我想要的是&#34; top:100%;&#34;与整个标题相关,&#34;左:0;&#34;与子菜单为子项的列表元素相关。

我希望我的问题很明确。我以前找不到任何提出这个问题的人。对不起,我无法在问题中放置图片或更多链接,因为这是我的第一个问题,所以我没有足够的声誉。

感谢您阅读我的问题,希望能尽快得到解答!

2 个答案:

答案 0 :(得分:1)

这是小提琴:http://jsfiddle.net/td6Las4x/

只为“#header”添加“position:relative”,为“#header ul&gt; li&gt; .submenu”和“display:inline-block;”删除“left:0”为“#header li”

#header li {
    display: inline-block;
}

答案 1 :(得分:0)

您可以将.submenu相对于标题定位,然后利用left: auto的行为。

然后,.submenu将是一个绝对定位的元素,其leftwidthright属性都是auto

因此,根据§10.3.7

  

如果全部三个&#39; left&#39;,&#39; width&#39;和&#39; right&#39;是&#39; auto&#39;:首先设置任何   &#39;自动&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;到0.然后,如果   &#39;方向&#39;建立static-position的元素的属性   包含块是&#39; ltr&#39;设置&#39;离开&#39;到static position并申请   第三条规则

该静态位置定义为

  

左边的静态位置&#39;是距离左边缘的距离   包含块到假设框的左边缘   如果它的位置是第一个元素,那将是第一个元素。   财产一直是静态的&#39;并且&#39;漂浮&#39;曾经没有了#39;价值是   如果假设框位于包含的左侧,则为负数   块。

因此,请删除position: absolute并查看:

&#13;
&#13;
#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
  position: relative;       /* Positioning will be relative to the HEADER */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline;          /* Makes list items inline */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: static;
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li>.submenu{
  display: block;           /* Shows the submenu */
}
&#13;
<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

实际上,由于.submenu是一个块且其父级是内联的,submenu将出现在下一行的开头。

为了防止这种情况,.submenu必须生成一个块容器。可以使用display: inline-block生成内联级块容器。

&#13;
&#13;
#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
  position: relative;       /* Positioning will be relative to the HEADER */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline-block;    /* Makes list items inline-block */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: static;
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li>.submenu{
  display: block;           /* Shows the submenu */
}
&#13;
<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

现在.submenu具有左侧所需的静态位置。

因此,如果再次添加position: absolute,它会按预期运行:

&#13;
&#13;
#header{
  padding: 0.125em;     
  background: #eee;         /* Styling for clarity */
  position: relative;       /* Positioning will be relative to the HEADER */
}
nav{
  display: inline;          /* Makes nav inline */
}
h1{
  display: inline;          /* Makes the main title inline */
}
#header ul{
  padding:0;                /* Clears the space around the list */
  display: inline;          /* Makes lists inline */
}
#header li{
  display: inline-block;    /* Makes list items inline-block */
  list-style-type: none;    /* Removes bullets */
}
#header ul>li>.submenu>li{
  display: block;           /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
  display: none;            /* Hides the submenu */
  position: absolute;
  top: 100%;                /* Position directly under - SHOULD BE UNDER HEADER */
  background: #ccc;         /* Styling for clarity */
}
#header ul>li>.submenu{
  display: block;           /* Shows the submenu */
}
&#13;
<header id="header">
  <nav>
    <ul>
      <li>
        <a>
          <h1>
            <img>TITLE
          </h1>
        </a>
      </li>
      <li>
        <a>PAGE</a>
      </li>
      <li>
        <a>PAGE</a>
        <ul class="submenu">
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
          <li><a>PAGE</a></li>
        </ul>
      </li>
      <li>
        <a>PAGE</a>
      </li>
    </ul>
  </nav>
</header>
&#13;
&#13;
&#13;

总结一下,修复是

#header li {
  display: inline-block;
}
#header ul > li > .submenu {
  left: auto; /* Initial value */
}