Positioning html CSS












-2















I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?



I tried changing the position value but it doesn't work.






.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>












share|improve this question




















  • 2





    can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

    – HolyMoly
    Jan 3 at 2:13











  • positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

    – HolyMoly
    Jan 3 at 2:16






  • 2





    Hard to answer your question if we can't see the HTML.

    – webkitfanz
    Jan 3 at 2:33











  • <body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

    – Ross Linton
    Jan 3 at 3:40











  • Sorry about that

    – Ross Linton
    Jan 3 at 14:56
















-2















I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?



I tried changing the position value but it doesn't work.






.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>












share|improve this question




















  • 2





    can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

    – HolyMoly
    Jan 3 at 2:13











  • positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

    – HolyMoly
    Jan 3 at 2:16






  • 2





    Hard to answer your question if we can't see the HTML.

    – webkitfanz
    Jan 3 at 2:33











  • <body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

    – Ross Linton
    Jan 3 at 3:40











  • Sorry about that

    – Ross Linton
    Jan 3 at 14:56














-2












-2








-2








I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?



I tried changing the position value but it doesn't work.






.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>












share|improve this question
















I created a rectangle with a position: relative; and positioned an icon inside. But when I create a new div class called .Home and give it a <h4>Home</h4> element with position: relative; it position the element outside of the rectangle. What am I doing wrong?



I tried changing the position value but it doesn't work.






.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>








.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>





.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
position: relative;
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.Home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative
}

<div class="container">
<div class="Rec">
<div class="icons"><i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>






html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 15:01









disinfor

3,05511929




3,05511929










asked Jan 3 at 2:08









Ross LintonRoss Linton

194




194








  • 2





    can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

    – HolyMoly
    Jan 3 at 2:13











  • positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

    – HolyMoly
    Jan 3 at 2:16






  • 2





    Hard to answer your question if we can't see the HTML.

    – webkitfanz
    Jan 3 at 2:33











  • <body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

    – Ross Linton
    Jan 3 at 3:40











  • Sorry about that

    – Ross Linton
    Jan 3 at 14:56














  • 2





    can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

    – HolyMoly
    Jan 3 at 2:13











  • positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

    – HolyMoly
    Jan 3 at 2:16






  • 2





    Hard to answer your question if we can't see the HTML.

    – webkitfanz
    Jan 3 at 2:33











  • <body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

    – Ross Linton
    Jan 3 at 3:40











  • Sorry about that

    – Ross Linton
    Jan 3 at 14:56








2




2





can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

– HolyMoly
Jan 3 at 2:13





can you post the HTML that goes with this? I suspect, the Home element is a sibling of the .Rec, rather than a child

– HolyMoly
Jan 3 at 2:13













positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

– HolyMoly
Jan 3 at 2:16





positioning can be tricky at first, here is a quick article that may help for the long run: medium.com/@jacobgreenaway12/…

– HolyMoly
Jan 3 at 2:16




2




2





Hard to answer your question if we can't see the HTML.

– webkitfanz
Jan 3 at 2:33





Hard to answer your question if we can't see the HTML.

– webkitfanz
Jan 3 at 2:33













<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

– Ross Linton
Jan 3 at 3:40





<body> <div class="container"> <div class="Rec"> <div class="icons"><i class="fas fa-bars"></i> </div> </div> </div> </body>

– Ross Linton
Jan 3 at 3:40













Sorry about that

– Ross Linton
Jan 3 at 14:56





Sorry about that

– Ross Linton
Jan 3 at 14:56












1 Answer
1






active

oldest

votes


















0














You don't need parent div to be position:relative. Check out the Codepen.



<div class="container">
<div class="Rec">
<div class="icons">
<i class="fas fa-bars"></i>
<div class="home">
<h3>Home</h3>
</div>
</div>
</div>
</div>


CSS



.container {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
position: static;
}

.Rec {
width: 97px;
height: 812px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
position: relative;
}

.icons {
width: 38px;
height: 48px;
left: 30px;
top: 29px;
}

.fa-bars {
color: black;
font-size: 30px;
}

.home {
width: 65px;
height: 29px;
left: 34px;
top: 217px;
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
color: black;
position: relative;
}


Is this what you want?






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015484%2fpositioning-html-css%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    You don't need parent div to be position:relative. Check out the Codepen.



    <div class="container">
    <div class="Rec">
    <div class="icons">
    <i class="fas fa-bars"></i>
    <div class="home">
    <h3>Home</h3>
    </div>
    </div>
    </div>
    </div>


    CSS



    .container {
    height: 100%;
    width: 100%;
    margin: auto;
    display: table;
    top: 0;
    background-size: cover;
    position: static;
    }

    .Rec {
    width: 97px;
    height: 812px;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    }

    .icons {
    width: 38px;
    height: 48px;
    left: 30px;
    top: 29px;
    }

    .fa-bars {
    color: black;
    font-size: 30px;
    }

    .home {
    width: 65px;
    height: 29px;
    left: 34px;
    top: 217px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: 20px;
    text-align: center;
    transform: rotate(-90deg);
    color: black;
    position: relative;
    }


    Is this what you want?






    share|improve this answer




























      0














      You don't need parent div to be position:relative. Check out the Codepen.



      <div class="container">
      <div class="Rec">
      <div class="icons">
      <i class="fas fa-bars"></i>
      <div class="home">
      <h3>Home</h3>
      </div>
      </div>
      </div>
      </div>


      CSS



      .container {
      height: 100%;
      width: 100%;
      margin: auto;
      display: table;
      top: 0;
      background-size: cover;
      position: static;
      }

      .Rec {
      width: 97px;
      height: 812px;
      left: 0px;
      top: 0px;
      background: #FFFFFF;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
      position: relative;
      }

      .icons {
      width: 38px;
      height: 48px;
      left: 30px;
      top: 29px;
      }

      .fa-bars {
      color: black;
      font-size: 30px;
      }

      .home {
      width: 65px;
      height: 29px;
      left: 34px;
      top: 217px;
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      font-size: 20px;
      text-align: center;
      transform: rotate(-90deg);
      color: black;
      position: relative;
      }


      Is this what you want?






      share|improve this answer


























        0












        0








        0







        You don't need parent div to be position:relative. Check out the Codepen.



        <div class="container">
        <div class="Rec">
        <div class="icons">
        <i class="fas fa-bars"></i>
        <div class="home">
        <h3>Home</h3>
        </div>
        </div>
        </div>
        </div>


        CSS



        .container {
        height: 100%;
        width: 100%;
        margin: auto;
        display: table;
        top: 0;
        background-size: cover;
        position: static;
        }

        .Rec {
        width: 97px;
        height: 812px;
        left: 0px;
        top: 0px;
        background: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
        position: relative;
        }

        .icons {
        width: 38px;
        height: 48px;
        left: 30px;
        top: 29px;
        }

        .fa-bars {
        color: black;
        font-size: 30px;
        }

        .home {
        width: 65px;
        height: 29px;
        left: 34px;
        top: 217px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        font-size: 20px;
        text-align: center;
        transform: rotate(-90deg);
        color: black;
        position: relative;
        }


        Is this what you want?






        share|improve this answer













        You don't need parent div to be position:relative. Check out the Codepen.



        <div class="container">
        <div class="Rec">
        <div class="icons">
        <i class="fas fa-bars"></i>
        <div class="home">
        <h3>Home</h3>
        </div>
        </div>
        </div>
        </div>


        CSS



        .container {
        height: 100%;
        width: 100%;
        margin: auto;
        display: table;
        top: 0;
        background-size: cover;
        position: static;
        }

        .Rec {
        width: 97px;
        height: 812px;
        left: 0px;
        top: 0px;
        background: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
        position: relative;
        }

        .icons {
        width: 38px;
        height: 48px;
        left: 30px;
        top: 29px;
        }

        .fa-bars {
        color: black;
        font-size: 30px;
        }

        .home {
        width: 65px;
        height: 29px;
        left: 34px;
        top: 217px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        font-size: 20px;
        text-align: center;
        transform: rotate(-90deg);
        color: black;
        position: relative;
        }


        Is this what you want?







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 3 at 15:11









        CrazyPasteCrazyPaste

        1,6601124




        1,6601124
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015484%2fpositioning-html-css%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas