# Using CSS position and left/right/top/bottom props to move objects in a flex on top of each other **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 17, 2023, 12:37pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992 "2023-08-17T12:37:51Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 17, 2023, 12:37pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/1 "2023-08-17T12:37:51Z")
I found this "life hack" a little while back and thought I'd mention it here. You can set the `style.position` of components in a flex container to something like "absolute" and then add `width`, `height`, and any of `left` `top` `right` and/or `bottom` props to move your component around. For example, I created this view below as a flex view and I wanted to put the alarm symbol "on top" of the analogue indicator which is set to grow 1 shrink 1. I also wanted the alarm indicator to take up the full view content. So to do this, I used the style settings in the screenshot for the alarm symbol. This will keep the alarm symbol "anchored" to the bottom left of the View at absolute coordinates (relative to the View), regardless of what size the View is. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/b/eb3d0bad707e0630699e38b6c66d24ea043f2277.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cb94e05cbc32926067993cea75f807f97acb1cc.png) Alarm symbol style settings: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/e/5ea16c357dd4d06d7ad0a712517b1b2ef628bb3b.png) Hope this helps someone! Edit: If you want to place the component halfway, or any % really, down the height of the flex, you need to move the origin and translate the component by 50% of its height, since the CSS left/right/top/bottom use the component's top-left as the origin; transforms, on the other hand, use a settable origin which defaults to the centre (you can set this with `transform-origin`). ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c076edaaae61095412058f10e67dad5226693949.png) Edit2: **Important:** One of the ancestors of the flex where you have children with `position: absolute` set must have `position: relative` set, otherwise the absolute positions will be relative to the page and not the right component. For example, add `styles.position: relative` to the View's `root` container. ---
**Author:** ![DNice](https://avatars.discourse-cdn.com/v4/letter/d/858c86/32.png) [@DNice](https://forum.inductiveautomation.com/u/DNice)\ **Post date:** [August 17, 2023, 12:58pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/2 "2023-08-17T12:58:45Z")
Good to know! I have used margin parameters (with -/+ values depending on movement I need) to overlay items in past projects. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 17, 2023, 1:01pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/3 "2023-08-17T13:01:09Z")
I have used those before too. It's kind of cool that you can put stuff outside of the template View 🙂 Need to make sure to set `overflow: visible` on the embedded view though ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/3698c828a5260a607201b6d373abfbedb95eef27.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/736353eebfaa0ab531076e051033ed7f78356576.png) ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [August 17, 2023, 1:27pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/4 "2023-08-17T13:27:29Z")
Thanks for sharing, in this example, how is a flex container any "better" than coordinate? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 17, 2023, 1:29pm UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/5 "2023-08-17T13:29:13Z")
Well for one, the alarm symbol will _always_ be in the bottom left. It's similar to an anchored component in Vision. In a coord container, there's no way (without probably similarly using position/etc) to anchor components. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [September 21, 2024, 5:18am UTC](https://forum.inductiveautomation.com/t/using-css-position-and-left-right-top-bottom-props-to-move-objects-in-a-flex-on-top-of-each-other/77992/6 "2024-09-21T05:18:35Z")
Thanks for posting this Nick. I found another use case for this. It allows you to basically make a flex coordinate container. Why would you want one? Imagine a scenario where you want to build a template that supports a dynamic number of indicators at locations based on the value of a setpoint. You can use this strategy to dynamically spawn as many indicators as you need based on indirect bindings from a parameterized tagpath to a UDT. It's a very powerful technique I think people are sleeping on. I know I was. edit: I'm using this on something right now. One thing I just learned is you want to uncheck the "useDefaultViewWidth" and "useDefaultViewHeight" when doing this in a flex repeater or the dynamically created elements will not scale with their parent. I just wanted to add that in case someone is struggling with this sometime in the future. It's easy to miss that property when you're using a flex repeater in an unintended way.