CSS定位

来源：互联网发布：女人三十如狼体验知乎编辑：程序博客网时间：2024/05/06 18:44

一、定位的简介

1.定位的作用

定位用来解决元素的排列(摆放)问题

使用定位可以将元素随心所欲的摆放到任意位置

2.有哪些定位

1)默认的定位

块元素垂直排列
行内元素水平排列
这种默认的排列方式称之为流定位

流：元素有序的排列的队伍

2)特殊的定位

浮动定位：可以让块左右排列
相对定位：相对于自身产生很小的偏移
绝对定位：相对于父亲产生很大的偏移
固定定位：相对于窗口产生很大的偏移

后3种定位本质一样，都是相对于某目标产生偏移

二、浮动定位

浮动：让块左右排列

三、相对、绝对、固定定位

1.区别和联系：

相同点：设置偏移量的方式一样

语法： left:10px;

规律：向中心方向偏移为正，反方向偏移为负

不同点：设置偏移量的参考对象不一样

1）相对定位：以自己原来的位置为目标，元素不脱离流（位置不释放）（图片抖动）

代码：

                position: relative;
                left: 2px;
                right: -2px;
li:hover {
position: relative;
left: 2px;
right: -2px;
}

2) 绝对定位：（将一个元素覆盖到另一个元素上）

-以带有position的父辈为目标

-都有position则采用就近原则

-都没有position则以body为目标

-元素脱离流（释放位置）

步骤：在父辈上加position->设置定位 position:absolute

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Demo03</title>
<style>
div {
width: 318px;
height: 318px;
border: 3px solid red;
/*不设置偏移量，只是为了便于子元素以此为目标做绝对定位 */
position: relative;
}
p {
position: absolute;
left: 0;
bottom: 10px;
width: 318px;
background: #FFF;
text-align: center;
}

</style>
</head>
<body>
<div>
<img src="../images/3.jpg"/>
<p>郁郁葱葱【】【】【】</p>
</div>
</body>
</html>

3）固定定位：

-以浏览器的窗口为目标

-永远挂在窗口的固定位置不动

-元素脱离流（释放位置）

代码：position：fixed;

<style>

                div {
                    border: 1px solid #ccc;
                    width: 50px;
                    text-align: center;
                    position: fixed;
                    bottom: 10px;
                    right: 5px;
                }
        </style>

<body>
            <h1>罗技鼠标</h1>
            <p>very good</p>
            <p>xxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxx</p>
                <p>xxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxx</p>
            <div>
                
                <a href="#">TOP</a>
            </div>
        </body>

四、如何选择定位方式

排除法：1.固定定位 2.浮动定位 3.相对定位（偏移量小） 4.绝对定位（应用率高）

例子：“操作成功” 移动到中间位置

1.设置div

<div class="message">
        <img src="../img/close.png"/>
        <p>操作成功</p>
    </div>

2.设置父元素（添加position）

.content {
position: relative;
}

3.设置message为绝对定位

/*派生，使优先级变高*/
.content .message {
        position: absolute;
        left: 200px;
        top: 100px;
        width: 450px;
        height: 100px;
}
4.设置图片为右浮动、外边距

.message img {
float: right;
margin: 5px;
}
5.改变“操作成功”的位置

.message p {
margin-left: 38px;/*外边距*/
line-height: 100px;/*行高*/
}
6.改整个框的边框，背景色等

.content .message {
border: 1px solid #F68A8A;
background: #FDECEC url(../img/ok.png) no-repeat 10px 42.5px;
}
7.靠近图片添加手型

/*图标变手型*/
.message img:hover {
cursor: pointer;
}

0 0