06.定位

最新推荐文章于 2022-06-24 09:21:47 发布

AlbertLiangzt

最新推荐文章于 2022-06-24 09:21:47 发布

阅读量343

点赞数

分类专栏：学习笔记-Javaweb 文章标签： html css

本文链接：https://blog.csdn.net/AlbertLiangzt/article/details/62056871

版权

学习笔记-Javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

作用：解决元素的排列问题；通过定位可以将元素摆放到任意位置

浮动定位：

1. 分类：

左浮动：让块按照正序左右排列

右浮动：让块按照倒序左右排列

如果最终不需要保留父元素的边框，直接在叔叔上消除影响即可，如果最终需要保留需要保留父元素的边框，在其内部增加一个空块，并在此块上消除影响。

2.步骤：

目标离队（流），

目标的弟弟跟进，目标浮动到左侧、右侧

<style>
    .d0,p{ width:400px; border: 1px solid #aaa; }
    .d1,.d2,.d3{ width:100px; height:100px; margin:10px; }
    .d1{ background-color: #ff0000; }
    .d2{ background-color: #00ff00; }
    .d3{ background-color: #0000ff; }
    .d1,.d2,.d3{ float:right; }
    .d4{ clear:right; }         <!-- 消除浮动影响 -->
</style>
<body>
    <div class=”d0”>
    <div class=”d1”></div>
    <div class=”d2”></div>
    <div class=”d3”></div>
    <!-- 仅用来消除浮动影响 -->
    <div class=”d4”></div>
    </div>
    <p>floating and watching</p>
</body>

偏移：

以任意边为基准，向中心方向偏移为正数

left:20px; 以左边为基准，向中心偏移20px，即向右偏移20px

top:-60px; 以上边为基准，向中心偏移-60px，即向上偏移60px

相对定位：

以自身为目标偏移

偏移后元素原来的位置不释放

position:relative

元素不脱离流（队伍）

case: photo wall

<style>
    body{background-color: #066; }
    ul{ 
        width:780px; 
        margin:20px auto;  
        list-style-type: none ;         ——去掉列表左侧的符号
        padding: 0;                 ——将列表左侧的内边距去掉
        }
    li{
        border:1px solid #ccc;
        width: 218px;
        margin: 10px;
        padding: 10px;
        float: left;
        background-color: #fff;
    }
    p{ text-align: center; }
    /*鼠标悬停时,让li偏移,实现一个抖动的效果*/
    li:hover{
        position: relative;
        left: 2px;          
        top: -20px;         
    }
</style>
<body>
    <ul>
        <li>
            <img src=”image1.jpg”/>
            <p>first photo</p>
        </li>
        <li>
            <img src=”image2.jpg”/>
            <p>second photo</p>
        </li>
        <li>
            <img src=”image3.jpg”/>
            <p>third photo</p>
        </li>
        <li>
            <img src=”image4.jpg”/>
            <p>fourth photo</p>
        </li>
        <li>
            <img src=”image5.jpg”/>
            <p>fifth photo</p>
        </li>
        <li>
            <img src=”image6.jpg”/>
            <p>sixth photo</p>
        </li>
    </ul>
</body>

绝对定位：

以带有position的父辈为目标偏移

若父辈都有position，则采用就近原则

若父辈没有position，则以body为目标

position:absolute;

以谁为目标就在谁上面加position

case:

<style>
    div{ 
        border: 1px solid red;
        width: 318px;
        position: relative;     ——仅声明定位，不设置偏移量，位置不受影响
     }
    p{ 
        position: absolute;
        bottom: 50px;
        width: 318px;
        background: #fff;
        text-align: center;
     }
    div{ height: 318px; }
</style>
<body>
    <div>
        <img src=”img1.jpg”/>
        <p>absolute</p>
    </div>
</body>

固定定位：

以浏览器窗口为目标偏移

偏移后元素的位置释放（脱离流）

position:fixed;

元素需要挂在窗口上永远不动，则采用固定定位

case: Top按钮挂在页面右下角

<style>
    div{ 
        border/width/line-height/right/bottom/text-align:
        position: fixed;
    }
</style>

如何选择定位

固定：是否想将元素挂在窗口上
浮动：是否想将块元素左右排列
相对：位置是否释放，偏移量小
绝对：超过15s没想出来，一般就是绝对定位

注意：

浏览器渲染网页的规则：

父元素高度自适应，只以流中元素的高度为准
浏览器认为文字很重要，会想办法将文字显示完整。

相对、绝对、固定定位的联系：

区别：在偏移时所选择的目标不同

相同点：偏移时所设置偏移量的方式相同

left:2px ; top: -10px ; 向右偏移：2px，向上偏移：10px;

堆叠顺序：

z-index: value; value越大，表示离用户越近，

case:照片重叠，悬停显示

<style>
    div {
        width/height/margin/background-color:
        positive: relative;         ——一div中心为基准
    }
    img { positive: absolute; }
    .i1{ left/top }
    .i2{ left/top }
    .i3{ left/top }
    img: hover {
        z-index: 999;               （——可能是z坐标）
    }
</style>
<body>
    <div>
        <img src=”1.jpg” class=”i1”/>
        <img src=”2.jpg” class=”i2”/>
        <img src=”3.jpg” class=”i3”/>
    </div>
</body>

AlbertLiangzt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06.定位

作用：解决元素的排列问题；通过定位可以将元素摆放到任意位置分类：1默认定位a)默认情况下，块元素垂直排列，行内元素水平排列b)这个默认排列的规律称为流定位，是默认的排序方式流:元素水平或垂直排列而形成的队伍2特殊定位a)浮动定位：可以让块元素左右排列 b)相对定位：让元素以自己为目标产生一定偏移 c)绝对定位：让元素以父亲为目标产生较大的偏移 d)固定定位：让元素以窗口为目标产生巨大的偏移浮
复制链接

扫一扫