星联网络专注帝国CMS二次功能插件开发-精品网站模板站长代码素材

  • 最近更新
  • 模板:33
  • 记录:12641|
  • 插件:52|
  • 工具:4|
  • 代码:8|
  • 评论:0

css中的绝对定位与相对定位

前言

本文重点解决css中的绝对定位与相对定位问题,希望能够帮助到你

position:relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

position:absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不

存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框.

这是对二者的定义,其实绝对定位还是比较好理解,定义某个标签的属性为绝对定位后,位置的改变都是相对于原来的位置进行的,仍然位于文档流中。

其实例如下:

 https://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative

而对绝对定位来说,定义这个属性后,内容就脱离文档流了,如果正常文档流中一个位置有东西,那我用绝对定位后,还在这个位置可以再添加元素,这个元素并不在文档流中,而相对定位则不可以,它会把元素往后排。

针对在我进行网页设计的时候遇到过的问题,对于一个div或者其他块来说,尽量不要把其中的html元素有的不定义这个属性,有点定义,这样在你设计排版的时候很容易乱掉的。

还有就我在写html文档的时候,想对网页进行自适应的修改,当我改变浏览器窗口大小的时候,没处理好这个问题就导致了网页元素乱掉。要注意对于绝对定位的元素,其大小和位置的参照是上一级的父元素,

这一点很重要,父元素间不能搞混了,不然很容易出错。具体代码解释可看下面:

<!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>
     body{

本网刊登的文章均仅代表作者个人观点,并不代表本网立场。文中的论述和观点,敬请读者注意判断。

本文地址:http://www.xlkjgs.com/notes/css/817.html

以上内容由本站整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

星联网络

星联网络是中国最具实战的互联网创业者的知识服务商,这里有互联网行业动态,网络推广,SEO优化,SEM优化,ESC配置,行业经验分型,互联网项目,微信营销、淘宝客赚钱、新媒体营销、京东运营、跨境电商等众多互联网营销知识分享

站长运营站长必备网站运营之道才能长久发展