Search code examples
csspositionfooterdisplayabsolute

What is the behaviour of using position and display together in CSS?

I am trying to make a footer at the bottom of the page which has 100% width. Using position: absolute;. I can achieve footer positioned at the bottom with the given code. However even after I add display: block; I can not get 100% width footer. I am wondering what is the using these two together in terms of positioning. For example does position override display value? Thank you in advance.

footer {
    text-align: right;
    position: absolute;
    /* display: block; */
    bottom: 0%;
    right: 0%;
    background-color: rgba(232, 232, 228, 0.5);
    border: 1px solid #fcd5ce;
}
Solution

  • Elements that are position: absolute behave the same as elements with display: block, so your display has no effect. Here's a good explanation: CSS: display:inline-block and positioning:absolute

    Setting width: 100% should fix your problem.