Spfx webpart positioning issue

%3CLINGO-SUB%20id%3D%22lingo-sub-324248%22%20slang%3D%22en-US%22%3ESpfx%20webpart%20positioning%20issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-324248%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Screenshot%20(1).png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F70701iC5906A7DA5127FFF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Screenshot%20(1).png%22%20alt%3D%22Screenshot%20(1).png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EHi%20there%2C%3CBR%20%2F%3EI'm%20facing%20an%20issue%20of%20displaying%20the%20right%20side%20bar%20in%20spfx%20web%20part%20on%20the%20site%20page%20in%20communication%20site.%20When%20i%20load%20the%20side%20bar%20in%20online%2Flocal%20workbench%2C%20it%20is%20working%20fine(coming%20from%20top%20of%20the%20page).%20But%20in%20site%20collection%2C%20it%20is%20starting%20from%20the%20web%20part%20area%2C%20but%20not%20from%20the%20top%20of%20the%20page%2C%20even%20though%20i%20provide%20higher%20z-index%20for%20that%20div.%20Any%20solutions%20for%20this%26nbsp%3B%20%3F%3CBR%20%2F%3ENote%3A%20this%20was%20working%20months%20back%20(last%20checked%20on%20august%202018)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-324248%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-324470%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20webpart%20positioning%20issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-324470%22%20slang%3D%22en-US%22%3E%3CP%3EHard%20to%20tell%20exactly%20from%20your%20screen%20shot%20and%20not%20seeing%20the%20solution.%20Sounds%20like%20your%20css%20position%20isn't%20set%20correctly.%20Looks%20like%20you%20are%20using%20absolute%20positioning%2C%20but%20that%20is%20only%20positioned%20to%20the%20nearest%20positioned%20ancestor%20(your%20web%20part).%20You'll%20likely%20to%20use%20Fixed%20positioning.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Screenshot (1).png

Hi there,
I'm facing an issue of displaying the right side bar in spfx web part on the site page in communication site. When i load the side bar in online/local workbench, it is working fine(coming from top of the page). But in site collection, it is starting from the web part area, but not from the top of the page, even though i provide higher z-index for that div. Any solutions for this  ?
Note: this was working months back (last checked on august 2018)

1 Reply

Hard to tell exactly from your screen shot and not seeing the solution. Sounds like your css position isn't set correctly. Looks like you are using absolute positioning, but that is only positioned to the nearest positioned ancestor (your web part). You'll likely to use Fixed positioning.