W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

Re: [csswg-drafts] Taking elements only out of the flow of imidiate parent, not out of flow of entire document

From: Meteor0id via GitHub <sysbot+gh@w3.org>
Date: Fri, 27 Jul 2018 11:46:10 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-408395197-1532691964-sysbot+gh@w3.org>
I noticed a tendency to move any positioning related issues to the css-grid draft. I do think this issue might also be valid on other layout models.

I'm not great at coming up with solid examples. I run into something, try if I can get a workaround for it, and if I can not, I sum up the issue in an issue report. Such is what I did here, but I moved on after reporting it and do not remember the details of case. I will give it a try but don't judge the whole issue on only this example.


```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<p>This page demonstrates a potential use case for a css property position: relative-to-grandparent;. It purpose is to lift an element from the flow of its parent, but keep it in the flow of the document. Instead of relating to its parent, the element relates to its 'grandparent' element.</p>
<p>In this particulair example, a number of images are included on the page, each with its own image caption. The desired outcome is to reposition all the captions at the bottom of the group of images, so that they do not get in between the images. These HTML elements could be moved over to the bottom of the group div, however that would make it very difficult to mark up the image with its caption for SEO purposes. Additionally, one might want to create a responsive design where the figure captions can be moved around according to a set of width based rules. Ultimatly, one could even design the figure caption to be positioned at a certain location, and adjust the text accordingly by the use of 'content'.
</p>
<div class="collection_of_images">

<div class="imageObject" itemprop="image" itemscope itemtype="http://schema.org/ImageObject" />
<img src="" itemprop="contentUrl" alt="Sheep" />
<div itemprop="caption" style="position: relative-to-grandparent;" class="image_caption">
Sheep walking around in the meadows
</div>
</div>

<div class="imageObject" itemprop="image" itemscope itemtype="http://schema.org/ImageObject" />
<img src="" itemprop="contentUrl" alt="A tree" />
<div itemprop="caption" style="position: relative-to-grandparent;" class="image_caption">
An occasional tree might be found in the meadows, placing the flat land into perspective.
</div>
</div>

<div class="imageObject" itemprop="image" itemscope itemtype="http://schema.org/ImageObject" />
<img src="" itemprop="contentUrl" alt="A waterfall" />
<div itemprop="caption" style="position: relative-to-grandparent;" class="image_caption">
At the edge of the meadows, the vallay has numerous beautiful landmarks, such as this waterfall.
</div>
</div>

</div>
</body>
</html>
```

```
@media (min-width 100px;) {
.image_caption::before {
content: "To the left: ";
}
}

@media (min-width 300px;) {
.image_caption::before {
content: "Above: ";
}
}

@media (min-width 500px;) {
.image_caption::before {
content: "To the right: ";
}
}

@media (min-width 1000px;) {
.image_caption::before {
content: "Below: ";
}
}

```


I have not got the time right now to finish this example. Feel free to finish it and post it here. the point I am trying to make is that various use cases can be found. Some SEO realted, some related to responsive design, and I am sure more use cases can be pointed out.

(I am also thinking about playing with margins, there might be cases where they should exist between the sibling elements, but not between them and their parent. I wrote another ticket about that, with its own proposed solution, but this might also be an lternative solution to that issue. https://github.com/w3c/csswg-drafts/issues/2848)

-- 
GitHub Notification of comment by Meteor0id
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2806#issuecomment-408395197 using your GitHub account
Received on Friday, 27 July 2018 11:46:21 UTC

This archive was generated by hypermail 2.3.1 : Friday, 27 July 2018 11:46:23 UTC