CSS定位

前端开发 作者: 2024-08-25 21:10:02
定位 1. 相对定位 <!DOCTYPE html> <html lang="en"> <he

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位
        相对于自己原来的位置进行偏移
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px  solid #666;
            padding: 0;
        }
        #first{
            border: 1px  dashed orange;
            background-color: #FC00FF;
            position: relative;     /*相对定位:上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            border: 1px  dashed greenyellow;
            background-color: brown;
        }
        #third{
            border: 1px  dashed aqua;
            background-color: rosybrown;
            position: relative;
            bottom: 10px;
            right: 20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
top: -20px;
left: 20px;
bottom: 10px;
right: 20px;

1. 没有父级元素定位的前提下

2. 假设父级元素存在定位

3. 在父级元素范围内移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位
        相对于自己原来的位置进行偏移
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px  solid #666;
            padding: 0;
            /*父级元素存在相对定位*/
            position: relative;
        }
        #first{
            border: 1px  dashed orange;
            background-color: #FC00FF;
        }
        #second{
            border: 1px  dashed greenyellow;
            background-color: brown;
            position: absolute;
            right: 30px;
        }
        #third{
            border: 1px  dashed aqua;
            background-color: rosybrown;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 3000px;

        }
        /*绝对定位,相对于浏览器*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位,fixed*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>
/*背景透明度*/
opacity: 0.5;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="content">
    <ul>
        <li>
            <img src="images/timg.jpg" alt="">
            <li class="tipText">这是一张背景图片</li>
            <li class="tipBg"></li>
            <li>时间:2020-8-4</li>
            <li>地点:XXXXXXX</li>
    </ul>
</div>

</body>
</html>
#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
/*子级元素相对于父级元素绝对定位*/
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 640px;
}
.tipText{
    color: wheat;
    z-index: 999;
}
.tipBg{
    background: black;
    /*背景透明度*/
    opacity: 0.5;
    /*下面的写法只有IE8之前的浏览器支持,如果项目有可能在老的浏览器上进行,最好两个都写*/
    filter: alpha(opacity=50);
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68602.html
CSS定位