草庐IT

你不知道的CSS---position小技巧

我不是药神 2023-03-28 原文
众所周时"position: sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。

回顾 position values

position中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下：

  • static: 此值为默认值，元素仍然隶属于文档流，此时不受left、z-index等属性控制。
  • relative: 此值配和left等属性可以改变元素在页面中的位置，但不会影响其他元素，因为原位置仍会空白保留。
  • absolute: 此值与前两个有本质上的区别，因为他会讲元素移除文档流。因此，后边的元素会占据改元素的位置。此外，被移除的元素所依旧的定位位置来自于第一个非static值的祖先级元素。
  • fixed: 此值也会被移除文档流，但是根据定位的元素时窗口。所以打印时候，会出现在每一页上面。
  • sticky: 此值较为复杂，大家可以先理解为sticky + fiexd的组合，接下来我们着重分析它。

聚焦 sticky

为什么要单独拿出来sticky来讲,因为它确实是position values中最抽象、隐晦的。这也造成学习成本加大，使用频率变低。要想说明白他是如何生效的？那就需要知道下面这三个要素。

  1. nearest scrolling ancestor。sticky元素最近的滚动祖先是谁，这决定了sticky将会对谁相对定位，也可以理解为对谁使用了fixed。
  2. nearest block-level ancestor。最近的块级元素，它则限制了sticky一定要在里面出现。也就是说即使sticky元素对窗口进行了top: 96px定位。但是他的块级元素，已经被滚动出窗口，此时该元素也不会被fixed在窗口之内，更不会距离顶部96px;
  3. stacking context。上面两条是使用必知的话，这条就是z-index生成条件必知。也就是说sticky会和"postion: absolute/fixed;"一样。产生层叠上下文。这样也解释了，为什么可以向fiexd一样固定在窗口内。

一种意想不到的使用场景

由CSS-position解决的场景不计其数的话，那这种使用方式一定知道的人会少很多。

解决场景：项目有一些老组件，现在业务要求给这些组件内部加一个footer，然后可以在footer放些按钮。

方案1: 相信大家一般都会去改动每个组件dom去实现这个功能。
方案2: 其实只需要使用fixed同样修改就可以了。首先：写一个footer组件，是这个组件使用fiexd布局即可，然后每个组件你只需要把现在内容区高度减小footer的高度即可。

具体实现如下：

footer组件

// jsx部分 const { Button } = require("antd") const footer = () => { return <div> <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button> </div> } // less 部分 .footer { position: fixed; bottom: 0; height: 60px; } 所有要加footer的组件

.per-component { height: calc(600px - 60px); // 600px: 替换成你自己组件高度，需要加footer组件的都需要修改高度 transform: translateX(0); // 此处为本方案核心： 使footer相对于该组件定位而不是窗口 }

结语

周末不歇业，不加班，但要学习。愿明天的自己，感谢今天努力的自己。

莫待萧萧两鬃丝！——朱学勉

position不知stickyfooterButton文档流块级元素使用场景JavaScript前端开发yyds干货盘点

有关你不知道的CSS---position小技巧的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  8. ruby-on-rails - Ruby 如何知道在哪里可以找到所需的文件？ - 2

    这里还有一个新手问题:require'tasks/rails'我在每个Rails项目的根路径中的Rakefile中看到了这一行。我猜这行用于要求vendor/rails/railties/lib/tasks/rails.rb加载所有rake任务:$VERBOSE=nil#LoadRailsrakefileextensionsDir["#{File.dirname(__FILE__)}/*.rake"].each{|ext|loadext}#LoadanycustomrakefileextensionsDir["#{RAILS_ROOT}/lib/tasks/**/*.rake"].so

  9. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  10. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

随机推荐