前段

最新推荐文章于 2024-09-19 16:27:57 发布

color_coral

最新推荐文章于 2024-09-19 16:27:57 发布

阅读量885

点赞数 2

分类专栏：前段

本文链接：https://blog.youkuaiyun.com/color_coral/article/details/89706716

版权

前段专栏收录该内容

4 篇文章

订阅专栏

1.css定位有几种，并进行描述

三种
第一：
position:relative :被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
left:60
tio:-60

第二种：
绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。
position:absolute
left:20px
top:20px

第三种:
position:fixed
left:40px
bottom:40px

1.用户名
<label for="username">用户名 : </label><input type="text" id="username">

2.选择城市
<label for="city">
    选择城市
</label>
<select name="" id="city">
    <option>北京</option>
    <option>上海</option>
    <option>广东</option>
</select>

3.模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom:0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 100;
        }
        .mode{
            position: fixed;
            width: 700px;
            height: 370px;
            background-color: white;
            top:50%;
            left: 50%;
            margin-left: -350px;
            margin-top: -185px;
            z-index: 101;
        }
        .content{
            height: 1000px;
            background-color: green;
        }

    </style>


</head>
<body>

<div>
    老夫聊发少年狂，治肾亏，不含糖。锦帽貂裘，千骑用康王。为报倾城随太守，三百年，九芝堂。酒酣胸胆尚开张，西瓜霜，喜之郎。持节云中，三金葡萄糖。布丁酒店选好房，西北望，阿迪王。
</div>
<div class="content">

</div>

<div class="mode">
    用户名: <input type="text">
    密码: <input type="password">
</div>

<div class="shadow">

</div>



</body>
</html>