TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Positioning in the web explained with GIFs

90 点作者 sandijs超过 10 年前

9 条评论

barkingcat超过 10 年前
It&#x27;s a great visual explanation, but the page is full of typos and spelling mistakes that can easily be caught by default spellcheckers.<p>I can issue a pull request with the corrections marked up if you have a git repo somewhere.<p>Unfortunately, the textual errors are detracting from the great message of the page.
评论 #8930741 未加载
评论 #8930779 未加载
pumpernick超过 10 年前
It&#x27;s a digestible introduction, but in the real world you&#x27;ll find that there&#x27;s a lumbering iceberg underneath.<p>Display, alignment, justification, relative parents, stacking contexts, flow, negative margins, flexbox, transform... all of these interact in... let&#x27;s say interesting ways, and not consistently across browsers.<p>I <i>wish</i> CSS positioning could be explained with a few GIFs, but moving outside the playground you quickly realize it can&#x27;t.<p>Now that the DOM and JS are mostly solved problems, I&#x27;d like to see browser vendors seriously tackle CSS rendering so it can be this simple.
评论 #8930575 未加载
评论 #8930239 未加载
techtalsky超过 10 年前
Really cool way of visualizing some CSS concepts but I would have loved to see &quot;float&quot;. I think that&#x27;s the one that gives people the most trouble. I think it would probably take several gifs to illustrate though. I do appreciate that the author kept his presentation very simple.
评论 #8930563 未加载
评论 #8930328 未加载
评论 #8930228 未加载
ender7超过 10 年前
Note that relative positioning does not <i>just</i> create a stacking context, it also allows you to use the `left` and `top` properties to offset the element from its static position.
devindotcom超过 10 年前
I appreciate the effort, but I found these animated illustrations confusing. Which part is what? On which sides are they bound? How are they attached? How do they interact? When are the shapes &quot;scrolling&quot; and when are they animating themselves? I like seeing the concepts in action, but I came away with little idea of what the concepts were other than that they were different - well, little more than I started with. More size, context, and interactions would make this vastly more educational, I think.
评论 #8931422 未加载
Mahn超过 10 年前
&gt; DO: Navigation that is always visible on the top of the screen? Yes!<p>Is this really a good practice? I&#x27;d personally avoid it unless there&#x27;s absolutely no other way of accomplishing whatever you are trying to do in terms of UX.
评论 #8930261 未加载
nsxwolf超过 10 年前
I didn&#x27;t understand the absolute gif. They said use it for logos that need to appear at the top of the page, but then you see it scroll right off the screen with the rest of it.<p>Are they saying, it&#x27;s absolute in reference to the yellow box it&#x27;s a child of, and it&#x27;s only scrolling up because the yellow box is?
评论 #8930151 未加载
评论 #8930045 未加载
guilbep超过 10 年前
Too bad the animations are not in css :D
评论 #8929925 未加载
Nemant超过 10 年前
Hi Tom A, Danish here :) Good luck and all the best!