CSS基础复习之定位

最新推荐文章于 2025-07-17 20:57:17 发布

原创最新推荐文章于 2025-07-17 20:57:17 发布 · 549 阅读

0 ·

CC 4.0 BY-SA版权

java那条路专栏收录该内容

72 篇文章

订阅专栏

如题

定位

定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。

流定位
浮动定位
相对定位
绝对定位
固定定位

默认是流定位

页面上的块元素从上到下一个接一个的排列。
每一个块级元素都会出现在一个新行中
元素框之间的垂直距离是由框的垂直外边距计算出来的。

行元素则是在一行中从左到右排列水平布置
不需要从新行开始
可以使用水平内边距，边框和外边框调整他们的间距。

浮动定位

让元素脱离普通流定位
将浮动元素防止在父元素的左边或者右边
浮动元素依旧位于父元素之内

浮动的框可以向左或者右移动，知道它的外边缘碰到父元素或者另一个浮动框的边框为止

经常使用它来实现特殊的定位效果。

这里写图片描述

浮动会脱离 div，然后浮动出去，一层一层的。浮动是让这个元素飘起来，在默认流布局上。

div会自动收缩

浮动就是：
float:value

float:right 就是向右浮动。

这里写图片描述

如果对d2也进行右浮动

这里写图片描述

再让d3也浮动

这里写图片描述

因为设置的这3个div外面的大div的宽有限制，所以会这样，把外div宽设置大点就好了

这里写图片描述

消除浮动影响（会影响父元素大小，段落等）

用clear属性
默认是none，就是不消除
left/right/both

这里写图片描述

但是这种方式只能消除对p的影响，无法消除对外层div的影响。

消除对外层的影响

在外层div中在加个div，这个姿势用于消除浮动影响，不是为了显示，因此将其设置为其内容为空，没有边框和颜色。

在这个空的div中写clear，就能达到消除对外层的影响。

左浮动

把d1设置了左浮动后

这里写图片描述

会浮上去。

在浮d2

这里写图片描述

先浮了d1，然后在浮d2的话，d2左边没有地方了就靠着d1来了，红色d1下面的是绿色d3

这里写图片描述

同时我还用在加一个div的方法消除了对外层div的影响。

浮动用处大大的~~~~

相对定位

元素原本所占的空间不释放
元素框会相对于它原来的位置偏移某个距离
设置垂直或者水平位置，让元素相对于它的起点进行移动
设置元素为相对定位
首先需要设置position属性的值为relative
然后使用left属性或者right属性设置水平方向的偏移量
也可以使用top属性或者bottom属性设置垂直方向的偏移量。

还在原来的大致位置上，稍微偏离一点。用相对定位做设置。没有脱离流布局

position:relative;（相对定位）
left:50px;（以左为准，向右偏移50px；）
top:50px;（以上为准，向下偏移50px；）

就是写相对定位时，就写position：relative，然后写以什么为准，直接就写就行。

写负数，就可以反方向偏移了。

去掉li前面的点

list-style-type:none;

这里写图片描述

<style type="text/css">
body {
    background-color: #333;
}
div {
    width: 900px;
    border: 1px solid #000;
}
ul li {
    float: right;  // 向左浮动
    margin: 20px;  //外边距：20px
    border: 1px solid #000; 
    list-style-type: none;  //设置li的序号点为none
    background-color: #CCC;
}
ul li:hover {   //当鼠标放在li上时
    position: relative; //相对定位
    right: 10px; //向左偏移10px
    top: 10px; //像下偏移10px
}
ul li p {
    color: #FFF;
    text-align: center;
}
</style>
</head>

<body>
<div>
  <ul>
    <li> <img src="1.png"/>
      <p>1111</p>
    </li>
    <li> <img src="1.png"/>
      <p>2222</p>
    </li>
    <li> <img src="1.png"/>
      <p>3333</p>
    </li>
    <li> <img src="1.png"/>
      <p>4444</p>
    </li>
  </ul>
</div>
</body>

开始还想再图片和段落加个div，后来想到就直接hover伪类对li设置就可以了。

绝对定位

将元素的内容从当前定位中移除，释放空间
并使用偏移属性来固定该元素的位置
相对于最近的已定位祖先元素
如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素
设置元素为绝对定位
首先需要设置position属性的值为absolute
然后使用left属性或者right属性设置元素的水平位置
也可以使用top属性或者bottom属性设置元素的垂直位置。

绝对定位会使他脱离流布局

在父元素内直接指定在什么位置。

设置父元素为相对定位 position:relative;以它为基准。
然后子元素对相对定位的父元素绝对定位。

#outter{
    position:relative;
    }

#d1{
    position:absolute;  
    right:0;
    bottom:0;
    }

就是先设置父元素为相对定位，然后在子元素设置绝对定位，然后设置相对于父元素如何偏移。如上，就是以父元素右为准，向左偏移0；以父元素

z-index 设置堆叠顺序

z-index:序号越大越在上层。

一旦修改了元素的定位方式，则元素可能会发生堆叠。

可以使用z-index属性来控制元素框出现的重叠顺序。

值为数值：数值越大表示堆叠顺序更高，即离用户更近。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面。

可以设置为负值：表示离用户更远

固定定位

将原始的内容固定在页面的某个位置

元素从普通流中完全溢出，不占用页面空间

当用户向下滚动页面时，元素框并不随着移动

设置固定定位
首先需要设置position 属性的值为fixed
通过left、top、right、以及bottom这些偏移属性来定义元素的位置

就是像TOP回到顶部和顶部导航栏无论怎么滚动页面都不动的。

posiyion:fixed;
然后
bottom:10px;
right:5px;

固定到页面的位置。如那个回到顶部，给他固定定位到哪，不会随着页面动而动。

#top {
    position: fixed;
    bottom: 10px;
    right: 5px;
}
</style>


<div id="top"><a href="#">TOP</a></div>

这里写图片描述

总结

相对定位是相对于自身产生偏移
绝对定位时相对于父元素产生偏移
绝对定位时特殊的相对定位

position ：规定元素的定位类型，可取值：static/relative/absolute/fixed

偏移属性： top、bottom、left、right属性，用于定义元素框的偏移位置

z-index：设置元素的堆叠顺序

float/cler: 浮动定位属性

补充：

列表

list-style-type
用于控制列表中列表项标志的样式
无序列表：出现在各列表项旁边的圆点
有序列表：可能是字母、数字或者另外某种技术体系中的一个符号。

无序列表取值

none：无标记
disc：实心圆
circle：空心圆
square：：实心方块

有序列表取值

none：无标记
decimal：数字（如1,2,3,4,5），为默认值
lower-roman: 小写罗马数字（如：i,ii,iii,iv,v）
upper-roman:大写罗马数字（如 I,II,III,IV,V）
等

list-style-image

属性使用图像来替换列表项的标记
取值为：url（），指定图像作为有序或无序列表项的标志。

就是可以把那个默认的图标换成自己的的图片

显示方式

元素都有自己默认的显示方式
块元素
从上到下，可以设置宽高，如<h1>,<p>,<div>等
行内元素
从左到右，不能设置宽高，如<span>,<a>等
行内块
从左至右，可以设置宽高，如<input>,<img>等

除了默认的显示效果之外，可以使用display属性修改元素框的显示方式，即改变生成框的类型。

可以用display把块元素改为行内元素。~~~~

改变元素的显示方式

，其取值有：
none,block,inline、inline-block
none：不显示该元素，释放其占用位置
block：将元素显示方式设置为块，如可以将行内元素转换为块元素
inline: 将元素显示方式设置为行内，如可以将块元素

装换为行内元素
inline-block: 将元素显示方式设置为行内块，如可以将行内元素转换为行内块元素

鼠标形状
默认情况下，光标会根据用户的操作发送改变
当鼠标悬停在一个链接上时，光标从指针形状变为手状形状
当鼠标悬停在文本区域时，会显示 I 形状
而当鼠标悬停在一个按钮上时，光标会会显示为箭头
可以使用cursor 属性指定显示给用户的鼠标光标类型（形状）
可以为用户提供一种可视化的暗示，提示可以进行的操作。

可取值：
default
pointer 手
crosshair 叉
text I
wait 圆圈不断的转
help等问号