position:fixed psuje siatkę bootstrap

Question

Moja strona składa się z 2 głównych części, grafiki po lewej oraz tabeli lub formularza po prawej stronie. Do utworzenia tego podziału wykorzystuję bootstrapa. Wszystko ładnie działało do momentu, gdy zechciałem, by grafika przesuwała się wraz ze scrollowaniem strony. 
W momencie gdy dodałem do diva ją przechowującego position:fixed wtedy została zignorowana siatka bootstrapowa i grafika zaczęła nachodzić na tabelę. Próbowałem dodać width:100%, niestety bezskutecznie. Jak można to naprawić?

Bez position:fixed

Z position:fixed

Link do HTML: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/Pages/Manage/Spell.cshtml
CSS: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/wwwroot/css/site.css
Grafika: https://github.com/Mlorism/LastTemple/blob/master/LastTemple/wwwroot/img/spellBook.png

Uproszczony kod:

<div class="row">
    <div class="col-5 pl-1">
        <div style="position:fixed;">
            <img src="~/img/spellBook.png" class="img-thumbnail-dark" />
        </div>
    </div>

    <div class="col-7 pl-5 pr-5">
        <div id="spellTable" class="text-center">

            <button class="btn btn-outline-light mb-2" onclick="ToggleColumn(1)">Stwórz zaklęcie</button>

            <table class="table text-light text-center">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Nazwa</th>
                        <th scope="col">Typ</th>
                        <th scope="col">Poziom</th>
                        <th scope="col">Mana</th>
                        <th scope="col">PA</th>
                        <th scope="col">Siła</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Spells)
                    {
                        <tr>
                            <th>@item.Id</th>
                            <td>@item.Name</td>
                            <td>@Enumerators.EnumConverter.Result(item.Type)</td>
                            <td>@item.Level</td>
                            <td>@item.ManaCost</td>
                            <td>@item.ActionCost</td>
                            <td>@item.Strength</td>
                            <td style="display:none">@item.Type</td>

                            <td><button class="btn btn-outline-warning" name="edit" type="button" onclick="ToggleColumn(2)">Edytuj</button></td>
                            <td><form method="post"><button class="btn btn-outline-warning" type="submit" asp-page-handler="Delete" asp-route-id="@item.Id">Usuń</button></form></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

 

Tym foreach się nie przejmujcie, tworzę stronkę w ASP.NET i to po prostu odwołanie do tabeli z danymi.

CSS:

body {
    background: linear-gradient(#202020, #313131);    
}
 
html {
    position: relative;
    min-height: 100%;
}
 
.img-thumbnail-dark {
    padding: 2rem 0.5rem;
    background-color: #2F3336;
    border: 1px solid #fff;
    border-radius: 2rem;
    max-width: 100%;    
} 

Answer 1

Użyj position: sticky; z fixed czekają Cię same problemy. Taki element zostaje wyjęty z normalnego układu strony i ciężko będzie Ci to ogarnąć.

Comments

Osiągnąłem co chciałem i rozwiązało problem. :)