The position of the child element is not correct when the parent element is transformed in two dimensions

It's so frustrating when elements with the CSS property 'transform' don't play nicely with embedded elements that have the property 'position: absolute'. It's driving me insane!!!

For example, when clicking on a menu item, a content div appears. If there is no 2D transform on the parent, it shows up in the right place. But as soon as you hover over its parent, it jumps to the far right. Ugh!

Is there any way to solve this issue?

Note: I can't move the embedded element (.floater) outside of the box because it's part of an ng-repeat (AngularJs repeater).

(Click and hover around to see the problem for yourself)

Here is my JsFiddle.

CSS(3):

.box {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin:100px auto;
}
.box:hover {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.box p {
    padding: 10px;
    background: gray;
}
.floater {
    position: absolute;
    display:none;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    background: #eee;
    top:126px;
    left:520px;
}

Answer №1

When applying a 2D transform to an element, its child elements might behave as if it had position: relative; or position: static properties.

To ensure consistent behavior, simply set the .box to have a position: relative;, and then position the .floater relative to the box.

Update the .box like this:

.box {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin:100px auto;
    position: relative; // add this line
}

Adjust the left and top positions of .floater as follows:

.floater {
    position: absolute;
    display:none;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    background: #eee;
    top: 0; // modify this
    left: 250px; // change this.
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use JavaScript and regex to control the state of a disabled submit button

I have a challenge where I need to activate or deactivate a submission button in a form called btn-vote using JavaScript. The button will only be activated if one of the 10 radio buttons is selected. Additionally, if the person-10 radio button is chosen, t ...

Angular library is being excluded from the R.js optimizer process

I'm encountering difficulties when trying to optimize an Angular project with the r.js optimizer. Everything works smoothly when I use grunt-requirejs for optimization, but as soon as I attempt to exclude Angular from the build, I encounter an error ...

Implementing a search filter for special characters in AngularJS

Looking to filter an array of players by their names, but facing a challenge with special characters in the names. Found a code snippet on Google that looks like this: $scope.modelFilterNormalized = function(){ if($scope.modelFilter) return $sco ...

Guide on ensuring all dynamic components of a NodeJS SailsJS web application are loaded using ajax requests

Exploring SailsJS and NodeJS for the first time, I decided to dive into a tutorial on creating a basic web application using these technologies. My main query is regarding rendering views (excluding the template) through Ajax. I aim to achieve a similar f ...

Is your script tag not functioning properly with Promises?

Below is the code snippet used to dynamically append scripts in the DOM using promises. This piece of code is executed within an iframe for A-frame technology and it is generated using Google Blockly (Block-based coding). export const appendScript = asy ...

What is the best way to delete a nested child object using a specific identification number?

Here is the current json structure: $scope.dataList = [{ CompanyName: null, Location: null, Client: [{ ClientId: 0, ClientName: null, Projects:{ Id: 0, Name: null, } }] }]; I'm attempting to remo ...

JS : Removing duplicate elements from an array and replacing them with updated values

I have an array that looks like this: let arr = ['11','44','66','88','77','00','66','11','66'] Within this array, there are duplicate elements: '11' at po ...

React Header Component Experiencing Initial Scroll Jitters

Issue with Header Component in React Next.js Application Encountering a peculiar problem with the header component on my React-based next.js web application. When the page first loads and I begin scrolling, there is a noticeable jittery behavior before th ...

Determine which scroll bar is currently in use

I'm running into an issue with multiple scrollbars on my page - they just don't seem to be functioning correctly: <div class="dates-container" v-for="id in ids"> <overlay-scrollbars :ref="`datesHeader` ...

Angular ngClick on a rectangle within an SVG element

Need to trigger angular click functions on rects in an svg. <rect data-ng-click="scrollToAnchor('siteHeader')" fill="#010101" width="501" height="81"></rect> Here's the function: $scope.scrollToAnchor = function(anchor) { $a ...

Adding a 'dot' to the progress bar in Bootstrap enhances its visual appeal

I am currently working on a progress bar and I would like it to look similar to this: https://i.sstatic.net/TSDEy.png However, my current output looks like this: https://i.sstatic.net/rQhYc.png I'm puzzled as to why the tooltip is floating there, ...

Determine the success of an SQL query in Node.js

I've created a basic API using nodejs to connect my Flutter app with a SQL Server database, but I have a question. How can I verify if the query was successful in order to return different results? I'm attempting an update after a successful in ...

Has anybody managed to successfully implement this require or debug NPM module for use in a web browser?

Has anyone successfully implemented the require or debug NPM modules in a browser environment? Despite claims and instructions on the debug NPM module's page that it can be used in the browser, attempting to do so results in the following error: Unc ...

sending data to a PHP file via an AJAX request

I am attempting to send a JSON string and a variable through an AJAX call in order to edit the query in a PHP file. My code is structured as follows: queryData = { "data": { "data_string": { "data": "oil", "default_fiel ...

Problem with TypeScript involving parameter destructuring and null coalescing

When using parameter destructuring with null coalescing in TypeScript, there seems to be an issue with the optional name attribute. I prefer not to modify the original code like this: const name = data?.resource?.name ?? [] just to appease TypeScript. How ...

What is the best way to retrieve values from a multi-select dropdown that functions effectively with each selection made

Currently, I am facing an issue in my program where I need to extract values from a multiple select option. The challenge lies in the fact that my view is in a .hbs file and the multiple select is populated using {each}. Here is a snippet of the code: Fir ...

Utilizing a URL to dynamically update the content within an I-Frame

One day, I made the questionable decision to use i-frames to load pages on my website in order to keep a sidebar on the main page without having to constantly make changes. In hindsight, I should have done the opposite and put the sidebar in the i-frame. N ...

Errors encountered by the Chrome extension

Hey there, I've recently delved into creating a chrome extension but hit a roadblock. My issue revolves around the service worker registration failing and encountering errors related to undefined properties. https://i.stack.imgur.com/bGzB4.png The c ...

How can I trigger the opening of an iframe without relying on jQuery when the user clicks on it?

I'm looking to create a UI where the user can click on an image and have an iframe appear on top of the image. Instead of using JQuery, I want to stick with pure JavaScript for this functionality. ...

When I switch to smaller devices, the content in my div gets covered by the following div

I'm struggling with my bootstrap setup. When I switch to small devices, my content overlaps with the next div. I've tried adjusting margins and positioning, but nothing seems to solve the issue. I suspect it has something to do with the relative ...