CSS

[CSS] absolute

효땡 2024. 5. 31. 16:09 
<!DOCTYPE html>
<html lang="ko">
    <head>
    <link rel="stylesheet" href="reset.css">
    <style>
    #s1 ul{background-color: yellow; height: 300px;}
    
    #s1 li:nth-child(1){
        background-color: blueviolet;
        position: absolute;
        left: 100px;
        top: 30px;}
        
    #s1 li:nth-child(2){
        background-color: red;
        position: absolute;
        right: 0;
        botton: 0;}
    </style>
    </head>
    
    <body>
        <section id="s1">
            <h3>position: absolute</h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </body>
</html>

1) <body> 본문영역이 기준 좌표

<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
        #s1 li:nth-child(1){
            background-color: blueviolet;
            position: absolute;
            left: 0;
            top: 0;}
        #s1 li:nth-child(2){
            background-color: crimson;}
        #s1 li:nth-child(3){
            background-color: darkgreen;}
        </style>
    <head>
    
    <body>
        <section id="s1">
            <h3>position:absolute</h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </body>
</html>

2) 부모영역을 기준으로 position:relative

-> 부모 : ul / 자식 : li

<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
        #s1 ul{
            background-color: darkslategrey;
            hegith: 300px;
            position: relative;}
            
        #s1 li:nth-child(1){
            background-color: indianred;
            position: absolute;
            bottom:0;}
            
        #s1 li:nth-child(2){
            background-color: gold;}
            
        #s1 li:nth-child(3){
            background-color: deeppink;}
        </style>
    </head>
    
    <body>
        <section id="s1">
            <h3>position:absolute</h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </body>
</html>

<!DOCTYPE html>
<html lang="ko">
    <head>
        <link rel="stylesheet" href="reset.css">
        <style>
        #s1 ul{
            background-color: darkslategrey;
            width: 300px;
            height: 300px;
            position: relative;}
       
       #s1 li:nth-child(1){
            background-color: indianred;
            position: absolute;
            width: 100px;
            bottom: 0;
            right: 0;}
            
        #s1 li:nth-child(2){
            background-color:gold;}
            
        #s1 li:nth-child(3){
            background-color: deeppink;}
        </style>
    </head>
    
    <body>
        <section id="s1">
            <h3>position:absolute</h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </body>
</html>

- position:absolute -> 절대적인 위치 / 부모요소를 기준으로 배치

- postition:relative  -> 객관적인 위치 / 요소 자기 자신을 기준으로 배치