元素一直落后于其他元素

Question

幻灯片位于导航元素后面。我刚刚开始使用 hmtl 和 css，我想知道如何保持分离。我想要实现的是，无论导航有多宽，body 都会向左调整但不会落后。任何建议将不胜感激谢谢！

页面css为

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    transition: margin-left .5s;
}

input,
select,
textarea {
    max-width: 280px;
}

.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

.carousel-inner .item img[src$=".svg"] {
}

导航 css 页面

.sidenav {
    margin-right: 20px;
    float: left;
    height: 100%; 
    width: 250px; 
    position: fixed;
    z-index:1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px; 
    transition: 0.5s;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s
    }

        .sidenav a:hover, .offcanvas a:focus {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 60px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

HTML 页面

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Computer Repair</a>
    </nav>
    <section id="sideNavigation" class="sidenav">
        <a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
        <a id="btnShowHide">Close</a>
    </section>
    <section id="main" class="body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2017 - Test</p>
            </footer>
    </section>

        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment names="Staging,Production">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
        @RenderSection("Scripts", required: false)
</body>

Answer 1

position fixed 总是计算(top-right-bottom-left) 到浏览器，你必须添加 margin-left to body-content class

.body-content{
  margin-left: 250px;
}

如果这不起作用，请告诉我。

Answer 2

好的，我相信这会对你有所帮助。你的 sidenav 宽度是 250px 所以给滑动面板的宽度或者你 body 的正确内容 as

width:calc(100% - 250px);
float:right;

元素一直落后于其他元素

Element keeps going behind other element

html

css

nav

web