CODEWITHSUNDEEP
htmlcss
tuffan
tuffan

Reputation: 13

Fixed div overlapping content?

I have a div with position: fixed but when I scroll the window at the bottom the div overlaps with the footer. I dont want the div to overlap with the footer.

What changes should I make in css to overcome that.

a.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="a.css">
    </head>
    <body>
        <div class="contain">
            <div class="data1"></div>
            <div class="data"></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

a.css

.contain {
    margin-bottom: 35rem;
}
.data {
    background-color: red;
    width: 30%;
    margin-top: -33%;
    position: fixed;
    height: 600px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 150px;
    bottom: 0;
}

Upvotes: 1

Views: 1095

Answers (1)

iamdebadipti
iamdebadipti

Reputation: 161

Just replace fixed with sticky. Please modify the code like below and see that works for you:

.contain {
/*     margin-bottom: 35rem; */
}
.data {
    background-color: red;
    border: 4px solid black;
    width: 30%;
    bottom: 30%;
    position: sticky;
    height: 300px;
}

.data1 {
    width: 30%;
    height: 500px;
    margin-left: 60%;
    background-color: black;
}

.footer {
    background-color: blue;
    width: 100%;
    height: 350px;
    bottom: 0;
}

Upvotes: 1

Related Questions