色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么當我旋轉圖像時，它會在我的導航條上重疊？

CSS
錢諍諍2年前11瀏覽0評論

我想讓圖像旋轉幾度，但是，每當我改變css中的rotate屬性時，圖像就開始粘在頁面的頂部并與導航條重疊。

我怎樣才能讓圖像旋轉而不重疊？

下面是代碼

HTML代碼塊

<!DOCTYPE html>

<html lang = "en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <Title>OTF Official Website</Title>
    <link href = "OTFstyle.css" rel = "stylesheet">
    <script src = "OTFscript.js"></script>
</head>

<body>
    <div class = "header">
        <img src = "icons/otflogo.png" alt = "Logo" id = "logo">
    </div>

    <div class = "toolbar">
    
        <div class = "home">
            <img src = "icons/home.png" alt = "Home" id = "homeicon"> 
            <p id = "text">Home</p>
        </div>
        
        <div class = 'ppl'>
            <img src = "icons/ppl.png" alt = "Members" id = "personicon">
            <p id = "text">Members</p>
        </div>

        <div class = "cam" >
            <img src="icons/cam.png" alt = "Pics and Videos" id = "camicon">
            <p id = "text2"> Pics</p>
        </div>

        <div class = "mem">
            <img src = "icons/mem.png" alt = "Memories" id = "memoryicon">
            <p id = "text3"> Memories</p>
            
        </div>
    </div>


    
    <div class = "intro">

        <img src = "frames/frame1.png" id = 'frame1'>
        <img src = "frames/frame2.png" id = 'frame2'>

        
             


    </div>
    
</body>

</html>

CSS代碼塊

/*Entire pg*/
html,body{
    background-color: rgb(144, 141, 141);
    margin: 0;
    padding: 0;
    width: 100%;
    
    
}
body{
    height:1000px;
}

/*Div contianing the header*/
.header{
    border:solid;
    height:80px;
    display:flex;
    background-color: whitesmoke;
}
/*otf logo*/
#logo{
    object-fit: cover;
    width: 120px;
    height: 120px;
    margin-top: -20px;
}

/*Div contianing the entire toolbar*/
.toolbar{
    top: 0px;
    position:sticky;
    height:60px;
    display:flex;
    justify-content: space-evenly;
    background-color: wheat;
}
/*Div containing Home icon*/
.home{
    display:block;
    height:60px;
    justify-content: center;

  
}

/*Div containing members icon*/
.ppl{
    display:block;
    height:60px;
    justify-content: center;
}

/*Div containing members icon*/
.cam{
    display:block;
    height:60px;
    
    justify-content: center;
}

/*Div containing memories icon*/
.mem{
    display:block;
    height:60px;
    justify-content: center;  
}

/*The icons themselves in the toolbar*/
#homeicon{
    height:40px;
}
#personicon{
    height:40px;
}
#camicon{
    height:40px;
}
#memoryicon{
    height:40px;
    margin-left: 11px;
}
/*Text under home and members icon*/
#text{
    margin-top:0px;
}
/*Text under pics icon*/
#text2{
    margin-top:0px;
    margin-left: 15px;
}
/*Div containing memories icon*/
#text3{
    margin-top:0px; 
}

/*Div containing the images*/
.intro{
    border:solid;
    display:block;
    background-color: white;
    
}

/*First image*/
#frame1{
    height:300px;
    rotate: 50deg;
    
}
/*Second image*/
#frame2{
    height:300px;
    margin-left:-100px;
}

我想旋轉css中的圖像，但是當我旋轉它的時候，圖像出現故障，并開始覆蓋所有令人討厭的東西。請幫幫忙

如果我沒理解錯的話，你需要設置你的& ltdiv class = & quot工具欄& quot& gt比要覆蓋的圖像的值高。

我在這里舉了一個例子:https://jsfiddle.net/an5m2eqs/

請特別注意我是如何設置？工具欄為9999，圖像為9998，這將工具欄放置在元素堆棧中遞增的更高級別。

/*Div contianing the entire toolbar*/
.toolbar {
  top: 0px;
  position: sticky;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
  background-color: wheat;
  z-index: 9999;
}

你可以在這里閱讀更多關于z-index的內容。