css定位有哪几种方式？

最新推荐文章于 2023-10-21 15:39:14 发布

wq2714

最新推荐文章于 2023-10-21 15:39:14 发布

阅读量1k

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/wq2714/article/details/104448750

版权

css中相关的定位：

	相信很多的初学者和我一样在刚接触有关浮动和定位都有些搞不清楚，在这里我将介绍一下我所理解的有关
css的定位方式。
		在css中浮动主要是解决一些有关布局的左右排列问题，其实定位的作用和浮动的作用差不多，不过区
别是定位用来解决叠加排列的问题。
		在用定位时，你需要写position属性，position 属性规定元素的定位类型。下面来逐一介绍
position属性后面所跟的值。

static
为默认值，意味着你当前的标签不会发生定位，且元素会正常出现在文档中。具体写法为：

 	position: static;

relative : 相对定位
relative相对定位它的特点是它不会是元素脱离文档流，且原空间会被保留，最主要的一点是它不会影响其它元素的布局。
relative后面一般跟top 、bottom 、left 、right四个表示偏移方向的值，要注意的一点是相对定位是相对于自身的位置进行偏移的。但当你没有定义相对偏移的量时它对元素自身没有任何影响。具体的写法为：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{
    width:100px; height:100px; background: red;}
    #box2{
    width:100px; height:100px; background: blue; 
        position: relative; left:0px; bottom:-50px;}
    #box3{
    width:100px; height

最低0.47元/天解锁文章

wq2714

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位有哪几种方式？

css中相关的定位：相信很多的初学者和我一样在刚接触有关浮动和定位都有些搞不清楚，在这里我将介绍一下我所理解的有关css的定位方式。在css中浮动主要是解决一些有关布局的左右排列问题，其实定位的作用和浮动的作用差不多，不过区别是定位用来解决叠加排列的问题。在用定位时，你需要写position属性，position 属性规定元素的定位类型。下面来逐一介绍position属性后面...
复制链接

扫一扫