Fatal编程技术网
  • css/
  • Css 在父对象上使用“倾斜”会导致sidenav失去位置

Css 在父对象上使用“倾斜”会导致sidenav失去位置

css

Css 在父对象上使用“倾斜”会导致sidenav失去位置,css,position,transform,absolute,skew,Css,Position,Transform,Absolute,Skew,对不起，我不知道该怎么说 我有一个标题和一个容器，其中包含一个侧导航和按钮来切换它。我正在尝试倾斜标题，同时通过向相反方向倾斜来保持容器正常。但是，这样做会导致sidenav失去其高度：100%，并且不会粘在左侧 如何在不影响侧堂的情况下倾斜背景 这是小提琴和代码 HTML 不要倾斜.header容器，而是添加一个psedoo元素并倾斜它： 正文{ 字体系列：“Lato”，无衬线； 过渡：左边距0.5s； } .侧导航{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0；

对不起，我不知道该怎么说

我有一个标题和一个容器，其中包含一个侧导航和按钮来切换它。我正在尝试倾斜标题，同时通过向相反方向倾斜来保持容器正常。但是，这样做会导致sidenav失去其高度：100%，并且不会粘在左侧

如何在不影响侧堂的情况下倾斜背景

这是小提琴和代码

HTML

不要倾斜
.header
容器，而是添加一个psedoo元素并倾斜它：

正文{
字体系列：“Lato”，无衬线；
过渡：左边距0.5s；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
}
.侧导航a:悬停，
.a:焦点{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
填充：16px；
}
.标题{
位置：相对位置；
宽度：100%；
高度：100vh；
}
.header：：之前{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#C18D8D；
变换：歪斜（-10度）；
内容：''；
}
.header\u容器{
位置：相对位置；
z指数：0；
宽度：80%；
最大宽度：71.25雷姆；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
身高：100%；
}

侧导航推送示例
单击下面的元素打开侧面导航菜单，并将此内容向右推

☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
//document.getElementById（“body”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
//document.getElementById（“body”）.style.marginLeft=“0”；
}
欢迎：）我喜欢背景创意。 
<body id="body">
    <header class="header">
        <div class="header__container">
            <div id="mySidenav" class="sidenav">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Clients</a>
                <a href="#">Contact</a>
            </div>

            <div id="main">
                <h2>Sidenav Push Example</h2>
                <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
                <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
            </div>
        </div>
    </header>

    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
    </script>
</body>

body {
    font-family: sans-serif;
}

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

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

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

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

#main {
    padding: 16px;
}

.header {
    width: 100%;
    height: 100vh;
    background-color: #C18D8D;
    transform: skewY(-10deg);
}

.header__container {
    width: 80%;
    max-width: 71.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    transform: skewY(10deg);
}