H5学习之24 CSS定位

最新推荐文章于 2024-09-02 00:06:04 发布

GOGOGOAAAA

最新推荐文章于 2024-09-02 00:06:04 发布

阅读量962

点赞数

本文链接：https://blog.csdn.net/qq_29469941/article/details/52130657

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            color: darksalmon;
        }
        /*通配选择器*/

        h1.pos_rel{
            position:relative;
            left: 500px;
        }
        /*position:relative
        相对定位，相对于原位置的位置,设置偏移量进行偏移。

        如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
        重点注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

        left：500px 原位置在偏移后位置的左边500px，
        其实也就是把一个元素往右偏移500px，可以为负*/

        h2.pos_abs
        {
            position:absolute;
            left:0px;
            top:0px;
          /*  margin:0;*/
        /*    padding:0;*/
        }
        /*position:absolute 绝对定位。
        设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，
        包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
        元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
        绝对定位使元素的位置与文档流无关，因此不占据空间。
        这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
        绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
        对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，
        而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

          left 与左边的距离
          top与右边的距离
          都设置成0但是还是没有贴着，是因为有margin，把margin设置成0贴合左上角了。
          一个块级的没设置大小的文本没有padding

          绝对定位是把元素固定在页面内的那个位置，而不是屏幕的某个位置(并不是相对于屏幕的上线与左线定位,要与fixed区分)，固定定位fixed是把元素固定在屏幕的某个位置
          绝对定位下，页面滑下来的话可能就看不到absoloute的元素了


        */

        h2.pos_fixed{
            position:fixed;
            left:100px;
            top:200px;
        }
        /*position:fixed 其实就是固定在屏幕的某个位置*/

        #image{
            position: absolute;
            top:30%;

            clip: rect(10px 100px 50px 30px );

        }
        /*通过绝对定位来设置图片的位置
        与上边的绝对定位一样
        可以设置成百分比值，是处于屏幕的哪个百分比的位置

        图片裁剪clip:rect( px px px px );
        将图片裁剪成矩形，第二个第三个值是裁剪后图片的长宽。裁剪点在左上角。
        第一个值是从top开始裁剪去掉多少像素长度。
        第二个值是从left开始裁剪去掉多少像素长度
        */

        div.overflow{
            margin-top:400px;
            background-color: antiquewhite;
            width:100px;
            height:100px;

            overflow:scroll;
        }
        /*overflow:scroll
        浏览器出现滚动条来处理溢出内容
        overflow:auto 让浏览器自动处理溢出的 内容
        overflow:hidden 隐藏溢出内容

        */

        #image2{
            vertical-align: top;
            margin: 20px;


        }
        /*vertival-align: top 一段文字里如果有图片的话，这个是设置文字的位置，虽然是图片的样式，但是更改之后改变的是文字的位置
        bottom就是文字到了下边，默认是这个.*/

        #image3 {
            position: relative;
            top: -100px;
            z-index: -1;
        }
        /*设image3为相对位置，并且向上移动100px，形成遮挡image2
        z-index:-1 把image3的优先级设置成-1，默认是0.
        所以会变成image3遮挡image2
        */

    </style>
</head>
<body>
<h1 class="pos_rel">相对定位的标题</h1>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>


<h2 class="pos_fixed">固定定位，相对于屏幕上下左右四条线的位置。即使页面滑动，在屏幕上也不会动，一直在视野内，跟着滑动</h2>


<img src="eg_smile.gif" id="image"/>

<div class="overflow">
当一个容器无法显示完文字时可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本
</div>

<p>aaa
<img src="eg_smile.gif" id="image2"/>
    bbbb
</p>

<img src="eg_smile.gif" id="image3"/>



</body>
</html>

具体效果如下：

代码解释如下：

3种定位方式：

相对定位，绝对定位，固定定位。

相对

<h1 class="pos_rel">相对定位的标题</h1>

h1.pos_rel{
    position:relative;
    left: 500px;
}
/*position:relative
相对定位，相对于原位置的位置,设置偏移量进行偏移。

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
重点注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

left：500px 原位置在偏移后位置的左边500px，
其实也就是把一个元素往右偏移500px，可以为负*/

绝对

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

h2.pos_abs
{
    position:absolute;
    left:0px;
    top:0px;
  /*  margin:0;*/
/*    padding:0;*/
}
/*position:absolute 绝对定位。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，
包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。
这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，
而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

  left 与左边的距离
  top与右边的距离
  都设置成0但是还是没有贴着，是因为有margin，把margin设置成0贴合左上角了。
  一个块级的没设置大小的文本没有padding

  绝对定位是把元素固定在页面内的那个位置，而不是屏幕的某个位置(并不是相对于屏幕的上线与左线定位,要与fixed区分)，固定定位fixed是把元素固定在屏幕的某个位置
  绝对定位下，页面滑下来的话可能就看不到absoloute的元素了


*/

固定

<h2 class="pos_fixed">固定定位，相对于屏幕上下左右四条线的位置。即使页面滑动，在屏幕上也不会动，一直在视野内，跟着滑动</h2>

h2.pos_fixed{
    position:fixed;
    left:100px;
    top:200px;
}
/*position:fixed 其实就是固定在屏幕的某个位置*/

图片裁剪：

<img src="eg_smile.gif" id="image"/>

#image{
    position: absolute;
    top:30%;

    clip: rect(10px 100px 50px 30px );

}
/*通过绝对定位来设置图片的位置
与上边的绝对定位一样
可以设置成百分比值，是处于屏幕的哪个百分比的位置

图片裁剪clip:rect( px px px px );
将图片裁剪成矩形，第二个第三个值是裁剪后图片的长宽。裁剪点在左上角。
第一个值是从top开始裁剪去掉多少像素长度。
第二个值是从left开始裁剪去掉多少像素长度
*/

当文本溢出时：

<div class="overflow">
当一个容器无法显示完文字时可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本当一个容器无法显示完文字时，可以设置滚动条以此能够查看完整的文本
</div>

div.overflow{
    margin-top:400px;
    background-color: antiquewhite;
    width:100px;
    height:100px;

    overflow:scroll;
}
/*overflow:scroll
浏览器出现滚动条来处理溢出内容
overflow:auto 让浏览器自动处理溢出的 内容
overflow:hidden 隐藏溢出内容

*/

图片位置及遮挡问题

<p>aaa
<img src="eg_smile.gif" id="image2"/>
    bbbb
</p>

<img src="eg_smile.gif" id="image3"/>

#image2{
    vertical-align: top;
    margin: 20px;


}
/*vertival-align: top 一段文字里如果有图片的话，这个是设置文字的位置，虽然是图片的样式，但是更改之后改变的是文字的位置
bottom就是文字到了下边，默认是这个.*/

#image3 {
    position: relative;
    top: -100px;
    z-index: -1;
}
/*设image3为相对位置，并且向上移动100px，形成遮挡image2
z-index:-1 把image3的优先级设置成-1，默认是0.
所以会变成image3遮挡image2
*/

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之24 CSS定位

html>lang="en"> charset="UTF-8"> type="text/css"> *{ color: darksalmon; } /*通配选择器*/ h1.pos_rel{ position:relative;
复制链接

扫一扫