要素が他の要素の後ろに続いています

スライドがナビゲーション要素の背後にあります。私はちょうどhmtlとcssを使い始めています。どうやって分けていくのかと思っています。私が達成しようとしていることは、ナビゲーションがボディが左に調整されているにもかかわらず、背後には行かないことです。どんなアドバイスもありがとう！ありがとう！要素が他の要素の後ろに続いています

ページの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"] { 
}

.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>

出典

2017-02-28 David Wruck

としてスライドパネルや、あなたの体の右側内容に幅を与えることです。あなたのHTMLソースコードとCSSを持っています。私たちはこの方法であなたを助けることはできません。 – AHBagheri

あなたのHTMLとCSSコードを共有してください。 –

私はcssとhtmlを追加したときに偶然質問を投稿しました。 –

常に計算された固定位置（右上・下用のページ

ため

ナビゲーションCSS -left）をブラウザに追加するには、margin-leftをbody-contentクラスにも追加する必要があります

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

この作品でない場合は私に知らせてください。

出典

2017-02-28 06:56:12

それはナビゲーションの側面にコンテンツを整列させるという点では機能しますが、ナビゲーションを短くするとそれに従わないことになります。 –

私はJavaScriptを使用することができますが悪くないですが、主なコンテンツをより悪質なものにするためのよりよい方法があるかどうか疑問に思っていました。 –

@DavidWruckあなたがブラウザのサイズを変更したときに幅を計算するためにjavascriptを使用するようにコンテンツの動的な幅を（そして従来のブラウザをサポートして）したい場合は –

okこれはあなたに役立つと思います。あなたsidenav幅は250ピクセルがそうあなたの質問を更新してください

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

出典

2017-02-28 07:06:52

要素が他の要素の後ろに続いています

答えて

関連する問題