详■细说明CSS 子原素相对性于父原素固定不动精

日期:2021-03-24 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

基本要素

肯定精准定位(absolute):设定为肯定精准定位的原素框从文本文档流彻底删掉,并相对性于其包括块精准定位,包括块将会是文本文档中的另外一个原素或是是原始包括块。原素本来在一切正常文本文档流中常占的室内空间会关掉,就行像该原素原先不会有一样。原素精准定位后转化成一个块级框,而无论原先它在一切正常流中转化成哪种种类的框。

https://www.w3school.com.cn/css/css_positioning_absolute.asp

相对性精准定位(relative):设定为相对性精准定位的原素框会偏位某一间距。原素依然维持其待定位前的样子,它本来所占的室内空间仍保存。

https://www.w3school.com.cn/css/css_positioning_relative.asp

难题剖析

肯定精准定位的原素的部位相对性于近期的已精准定位先祖原素,假如原素沒有已精准定位的先祖原素,那麼它的部位相对性于最开始的包括块。

针对精准定位的关键难题是要记牢每个精准定位的实际意义。因此,如今要我们备考一下学过的专业知识吧:相对性精准定位是“相对性于”原素在文本文档中的原始部位,而肯定精准定位是“相对性于”近期的已精准定位先祖原素,假如不会有已精准定位的先祖原素,那麼“相对性于”最开始的包括块。

注解:依据客户代理商的不一样,最开始的包括块将会是画布或 HTML 原素。

提醒:由于肯定精准定位的框与文本文档流不相干,因此他们能够遮盖网页页面上的其他原素。能够根据设定 z-index 特性来操纵这种框的堆积顺序。

处理计划方案

<div class="assistor">
  <div class="parent">
    <div class="child"></div>
    <div class="placeholder"></div>
  </div>
</div>
<style>
.assistor {
  position: relative; /*重要点*/
  display: block;
  width: 500px;
  height: 300px;
  margin: 100px auto 0 auto;
  background-color: #ddd;
}
.parent {
  width: 500px;
  height: 300px;
  background-color: #888;
  overflow: auto; /*重要点*/
}
.child {
  position: absolute; /*重要点*/
  width: 120px;
  height: 120px;
  margin: 100px 50px;
  background-color: #333;
}
.placeholder {
  width: 1000px;
  height: 1000px;
}
<style>

child相对性于assistorposition: absolute精准定位,parent内的內容自身承担展现。

要是assistor和parent一样大,看上去如同是子原素child相对性于父原素parent固定不动精准定位了。

实际基本原理:position: absolute;的原素会相对性于第一个设定了position: relative;的先祖原素开展精准定位,将assistor设定为position: reletive;,翻转条是在parent中的,position: fixed;和parent内的內容翻转就都完成了。

参照文章内容

https://www.cnblogs.com/qqfontofweb/p/7813718.html

到此这篇有关详细说明CSS 子原素相对性于父原素固定不动精准定位处理计划方案的文章内容就详细介绍到这了,大量有关css相对性父原素固定不动精准定位內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:发展战略协作小伙伴 返回下一篇:没有了