html - CSS Position element relative to two other -

is possible position element horizontally in relation 1 element , vertically using css? trying add dropdown menu navbar. however, submenu not align properly. want position element left edge aligns element b's left edge, want element a's top edge aligned element c's bottom edge.

essentially, want under header, aligned list element (image edited):

i have following code:

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around 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 */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: absolute;       /* enables positioning */    top: 100%;                /* position directly under - should under header */    left: 0;                  /* align left edge - should aligned ancestor list item */    background: #ccc;         /* styling clarity */  }  #header ul>li:hover>.submenu{    display: block;           /* shows 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>

now, make positioning something, have select element positioning done. but, if list element, submenu far up, because positioned under list element, , header has padding.

#header li {     position: relative; /* positioning relative ancestor list item */ } 

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around list */    display: inline;          /* makes lists inline */  }  #header li{    display: inline;          /* makes list items inline */    list-style-type: none;    /* removes bullets */    position: relative;       /* positioning relative ancestor list item */  }  #header ul>li>.submenu>li{    display: block;           /* makes submenu list items behave */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: absolute;       /* enables positioning */    top: 100%;                /* position directly under - should under header */    left: 0;                  /* align left edge - should aligned ancestor list item */    background: #ccc;         /* styling clarity */  }  #header ul>li:hover>.submenu{    display: block;           /* shows 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>

this result: aligned list element

and if header, submenu aligned left of entire header, not want.

#header {     position: relative; /* positioning relative header */ } 

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */    position: relative;       /* positioning relative header */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around 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 */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: absolute;       /* enables positioning */    top: 100%;                /* position directly under - should under header */    left: 0;                  /* align left edge - should aligned ancestor list item */    background: #ccc;         /* styling clarity */  }  #header ul>li:hover>.submenu{    display: block;           /* shows 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>

this looks like: under header

so, want "top: 100%;" related entire header , "left: 0;" related list element of submenu child.

i hope question clear. not find has asked question before. i'm sorry not put pictures or more links in question because first question ever, not have enough reputation.

thanks reading question, hope answered soon!

you can position .submenu relatively header, , take advantage of left: auto's behavior.

then, .submenu absolutely positioned element left, width , right properties auto.

therefore, according §10.3.7,

if 3 of 'left', 'width', , 'right' 'auto': first set 'auto' values 'margin-left' , 'margin-right' 0. then, if 'direction' property of element establishing static-position containing block 'ltr' set 'left' static position , apply rule number 3 below

that static position defined as

the static position 'left' distance left edge of containing block left margin edge of hypothetical box have been first box of element if 'position' property had been 'static' , 'float' had been 'none'. value negative if hypothetical box left of containing block.

so let's remove position: absolute , see:

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */    position: relative;       /* positioning relative header */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around 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 */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: static;    top: 100%;                /* position directly under - should under header */    background: #ccc;         /* styling clarity */  }  #header ul>li>.submenu{    display: block;           /* shows 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>

effectively, since .submenu block , parent inline, submenu appear @ beginning of following line.

to prevent that, .submenu must generate block container. inline-level block containers can generated display: inline-block.

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */    position: relative;       /* positioning relative header */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around 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 */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: static;    top: 100%;                /* position directly under - should under header */    background: #ccc;         /* styling clarity */  }  #header ul>li>.submenu{    display: block;           /* shows 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>

now .submenu has desired static position left.

therefore, if adding position: absolute again, works desired:

#header{    padding: 0.125em;         background: #eee;         /* styling clarity */    position: relative;       /* positioning relative header */  }  nav{    display: inline;          /* makes nav inline */  }  h1{    display: inline;          /* makes main title inline */  }  #header ul{    padding:0;                /* clears space around 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 */  }  #header ul>li>.submenu{    display: none;            /* hides submenu */    position: absolute;    top: 100%;                /* position directly under - should under header */    background: #ccc;         /* styling clarity */  }  #header ul>li>.submenu{    display: block;           /* shows 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>

to summarize, fix is

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