CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
dpndra
dpndra

Reputation: 2168

How to avoid a div overlapping another fixed div in Bootstrap?

    <html>
<head>
    <link href="hue.css" rel="stylesheet">
</head>
<body>
    <div class="content">

        <div class="column">
            <div class="form">
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxAddress">Domicilio  fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico  Monterrey,Nuevo León,México.C.P.XXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationExpeditionPlace">Lugar de  expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México.     </label>
                </div>
            </div>
        </div>
        <div class="column secondary">
            <!--?xml version="1.0" encoding="UTF-8"?-->
        </div>
</body>
</html>

position :fixed makes the div fixed but it is overlapped by other div when we scroll down. How do I make this row fixed at top and not let this div get overlapped by another div whenever we scroll down.

Upvotes: 0

Views: 8835

Answers (1)

Jon Kyte
Jon Kyte

Reputation: 2020

If I was to guess what you wanted (a fixed top bar that stays on top of the content/divs under it all the way down the page), something like this:

.column {
    position: fixed;
    top: 0;
    z-index: 10;
}

.secondary {
    position: relative;
    z-index: 5;
}

Check out this CodePen with an example, I've shortened down your code to only the necessary bits.

Upvotes: 1

Related Questions