关于position的一些疑问?

<body>
  <div class="wrap">
    
  </div>
  <button class="pos"></button>
</body>

.wrap{
   width:100%;
   height:100%;
   background:red;
}
.pos{
   position:absolute;
   width:100px;
   height:100px;
   top:100%;
   background:yellow;
   left:50%;
}

1,为什么position设成absolute ,height才会生效的呢?
2,.pos已经脱离文档流了为什么还会使页面生成滚动条?

阅读 5.3k
7 个回答
  1. 已上面的代码, 要想height:100%生效, 必须html和body也设置100%, 也就是父级也设置100%

  2. absolute虽然脱离文档, 但是还是属于body下, 你设置了top为100%, 当然会出现滚动条

1. 为什么position设成 absolute ,height才会生效的呢?

先问是不是,再问为什么...

  • button 默认是 display: inline-block; 显然是可以设置宽高的...

  • 我的理解还是不全面...请参考这篇文章

2. .pos已经脱离文档流了为什么还会使页面生成滚动条?

这是两码事吧...

  • CSS2.1 规范中说的是「CSS定位方案(Positioning schemes)」有3种:

    • 文档流(normal flow):根据盒子类型,block 的从上到下,inline 的从左到右...

    • 浮动(floats)

    • 绝对定位(absolute positioning)

  • 注意人家说的是定位方案啊!不要望文生义地觉得脱离文档流了就是怎么怎么样了..._(:зゝ∠)_

  • 生成滚动条是因为你要显示的 button 超出屏幕范围了 top: 100%;

  • 那么这个时候显不显示滚动条和文档流没关系,和 overflow 属性才有关系好么...

  1. button是一个行内元素,对应一个行内元素设置宽高是无效的

  2. 设置一个元素的position属性为absolute/relative/fixed以后,元素的display属性将会重新计算
    inline, run-in, table-row-group, table-column, table-column -group, 

table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block
-->>block
inline-table
-->>table
其它保持原值
3 脱离文档流是指脱离了正常的文档流的渲染流程中,这个元素还是在这个文档结构中啊,不会跑到火星去~~

好多人都理解错了。。。button可以直接设置设置宽高的,因为它是行内置换元素,其他的还有img,input,canvas等。不信点这里
以前写的老文章。
具体细节如下:

关于html元素的分类:
其实大多数人都知道,元素可以分为行内(inline element)元素和块状(block element)元素,其中行内元素设置宽度和高度不起作用,只有水平方向的padding和margin才有效,宽度取决于其内容的宽度,高度可以通过设置line-height来改变。

其实元素还可以分为置换元素(relplaced element)和非置换元素(non-relpalced element),他们在w3c的标准如下:
w3c介绍这里

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).

大概的意思就是对于置换元素,它的内容不再CSS format model内,比如说img,video,object,input,textarea,button。比如说img元素经常被它的src属性指向的内容所替换。置换元素有着固有的尺寸:默认的长,宽和比例。另一些元素没有明确的尺寸,比如说空元素。浏览器会根据其标签和属性的内容来确定显示的效果。

非置换元素:

其内容直接表现给用户,多数的元素都是非置换元素。

  1. 关于 行内置换元素

行内置换元素的宽度:

对于行内级置换元素来说,其宽度的设置需遵循以下几点:
若宽高的计算值都为auto且元素有固有宽度,则width的使用值为该固有宽度;
典型的例子是:拥有默认宽高的input当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度
若宽度的计算值为auto且元素有固有宽度,则width的使用值为该固有宽度;例子同上。若宽度的计算值为auto且高度有非auto的计算值,并且元素有固有宽高比,则width的使用值为高度使用值 * 固有宽高比;

典型的例子:img当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置

除此之外,当width的计算值为auto时,则宽度的使用值为300px

典型的例子:比如iframe, canvas

其它类型的置换元素,其宽度的定义都参照行内置换元素的定义。

2.关于 行内非置换元素

对于非置换元素,直接设置width和height都是无效的,想要改变,可以通过改变display类型,然后再设置宽度和高度;或者设置line-height改变高度

button是行内元素,不具有宽高(块元素才有宽高)

第二问……我竟无法回答

你不设置position 设置display:block;也可以显示

1: button标签元素跟a、input、select等一样都是行内元素,行内元素直接设置宽高是没有用是,必须转为块级元素才会有效。这里的用了position就相当于用了display:block; 运用了position、float都会自动转换成块级元素。
2:position是已经脱离文档了,但是你没有指定相对谁定位,默认是该元素的父级元素,你这里就相当于body元素。

<div class="wrap">
  <button class="pos"></button>    
</div>
html,body{
        margin:0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
        .wrap{
   position:relative;
   width:100%;
   height:100%;
   background:red;
}
.pos{
   position:absolute;
   width:100px;
   height:100px;
   bottom:0;
   background:yellow;
   left:50%;
   margin-left: -50px;
}
推荐问题
宣传栏