apple.html 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link rel="stylesheet" href="test1.css">
        <!--<script src="jquery-3.4.1.min.js"></script>-->
    </head>
    <body>
        
        <div class="foo">
            <h1>りんご</h1>
            <p>
            ほんぶん<br>    
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん    <br>    
            ほんぶん    <br>    
            </p>
        </div>
        
        <div class="husen green long">
            <p><a href="apple.html">リンゴ</p>
        </div>
        <div class="husen red pos02">
            <p><a href="strawberry.html">いちご</a></p>
        </div>
        <div class="husen orange pos03">
            <p><a href="orange.html">みかん</a></p>
        </div>
        
        <!--<script src="test1.js"></script>    -->    
    </body>
</html>

orange.html 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link rel="stylesheet" href="test1.css">
        <!--<script src="jquery-3.4.1.min.js"></script>-->
    </head>
    <body>
        
        <div class="foo">
            <h1>みかん</h1>
            <p>
            ほんぶん<br>    
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん    <br>    
            ほんぶん    <br>    
            </p>
        </div>
        
        <div class="husen green">
            <p><a href="apple.html">リンゴ</p>
        </div>
        <div class="husen red pos02">
            <p><a href="strawberry.html">いちご</a></p>
        </div>
        <div class="husen orange pos03 long">
            <p><a href="orange.html">みかん</a></p>
        </div>
        
        <!--<script src="test1.js"></script>    -->    
    </body>
</html>

strawberry.html 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link rel="stylesheet" href="test1.css">
        <!--<script src="jquery-3.4.1.min.js"></script>-->
    </head>
    <body>
        
        <div class="foo">
            <h1>いちご</h1>
            <p>
            ほんぶん<br>    
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん<br>        
            ほんぶん<br>    
            ほんぶん    <br>    
            ほんぶん    <br>    
            </p>
        </div>
        
        <div class="husen green">
            <p><a href="apple.html">リンゴ</p>
        </div>
        <div class="husen red pos02 long">
            <p><a href="strawberry.html">いちご</a></p>
        </div>
        <div class="husen orange pos03">
            <p><a href="orange.html">みかん</a></p>
        </div>
        
        <!--<script src="test1.js"></script>-->        
    </body>
</html>

test1.css 

body{
    background:#fff;
    display:flex;
    position:relative;
}

.foo{
    position:absolute;
    background-color:#eee;
    width:80%;
    left:50px;
    border-left:solid 1px #000;
    margin:auto;
    padding:1rem 1rem 1rem 120px;

}
.husen{
    width:50px;/*短い*/
    height:50px;
    position:absolute;
    box-shadow: 0 2px #ccc;
}
.pos02{
    top:70px;
}
.pos03{
    top:140px;
}

.long{
    width:150px;/*長い付箋*/
}
.green{
    background-color:#86ff1c;
}
.red{
    background-color:#ff6052;
}
.orange{
    background-color:#ffbb3d;
}

back