Crear elementos con posición absoluta en páginas de OneNoteCreate absolute positioned elements in OneNote pages

El cuerpo de una página de OneNote puede contener varios elementos secundarios div, img y object directos que pueden colocarse en la página por separado.The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

Comportamiento de posicionamiento y atributosAttributes and positioning behavior

Use los atributos data-absolute-enabled y style para crear elementos con posición absoluta en una página, como se indica a continuación:Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • El elemento de cuerpo debe especificar data-absolute-enabled="true".The body element must specify data-absolute-enabled="true". Si se omite o establece en false, todo el contenido del cuerpo se representa dentro de una div con posición absoluta _default que la API ha creado, y se ignora la configuración de posición.If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • Solo los elementos div, img y object pueden ser elementos con posición absoluta.Only div, img, and object elements can be absolute positioned elements.

  • Los elementos con posición absoluta deben especificar style="position:absolute".Absolute positioned elements must specify style="position:absolute".

  • Los elementos con posición absolutos deben ser secundarios directos del elemento body.Absolute positioned elements must be direct children of the body element. Cualquier secundario directo del cuerpo que no sea un elemento div, img o object con posición absoluta se representa como contenido estático dentro de la div _default con posición absoluta.Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • Los elementos con posición absoluta tienen su posición en las coordenadas superior e izquierda especificadas, relativas a la posición inicial 0:0 en el extremo superior izquierdo de la página encima del área de título.Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • Si un elemento con posición absoluta omite las coordenadas superior o izquierda, la coordenada que falta se establece en el valor predeterminado: top:120px o left:48px.If an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. Estas coordenadas predeterminadas especifican una posición justo debajo del área de título.These default coordinates specify a position just below the title area. Tenga en cuenta que omitir coordenadas puede traducirse en elementos que aparecen apilados uno encima de otro.Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • Los elementos con posición absoluta no se pueden anidar ni contener elementos con posición.Absolute positioned elements cannot be nested or contain positioned elements. La API omite cualquier configuración de la posición especificada en los elementos anidados dentro de una div con posición absoluta, procesa el contenido anidado dentro de la div primaria con posición absoluta y devuelve una advertencia en la propiedad api.diagnostics en la respuesta.The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

EjemploExample

El ejemplo siguiente contiene un secundario p directo, una div con posición absoluta y una div sin posición absoluta.The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

HTML de entradaInput HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

La API representa la div sin posición absoluta en la div predeterminada.The API renders the non-absolute positioned div in the default div. Tenga en cuenta que las etiquetas <div> anidadas se descartan porque no definen información semántica (como data-id).Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

HTML de salidaOutput HTML

<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
    <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

EjemploExample

El siguiente ejemplo crea una página que contiene una div con posición absoluta y una imagen con posición absoluta.The following example creates a page that contains one absolute positioned div and one absolute positioned image.

HTML de entradaInput HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

La API de OneNote evalúa el HTML de entrada y conserva todo el contenido semántico y cualquier información estructural que es compatible con OneNote.The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. La página resultante se representa como se muestra en la siguiente imagen (pero sin los bordes de la imagen y div visibles).The resulting page renders as shown in the following image (but without the visible borders for the div and image).

Página resultante con imagen y div con posición absoluta

Observe los cambios en la div anidada no colaborador del HTML de entrada.Notice the changes to the non-contributing, nested div from the input HTML. La API conserva el contenido de la div pero descarta las etiquetas <div> porque la div no define información semántica (como data-id).The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

Para obtener más información sobre cómo la API de OneNote controla el HTML de entrada y salida, consulte HTML de entrada y salida para páginas de OneNote.For more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

Atributos de estilo CSS compatiblesSupported CSS style attributes

Todos los elementos con posición absoluta pueden especificar las posiciones superior e izquierda.All absolute positioned elements can specify top and left positions. Las div e imágenes pueden especificar la anchura y las imágenes también pueden especificar la altura.Divs and images can specify width, and images can also specify height. Por ejemplo:For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
AtributoAttribute Elemento admitidoSupported element DescripciónDescription
toptop div, img, objectdiv, img, object Las coordenadas del eje y del borde superior del elemento, en píxeles únicamente.The y-axis coordinate of the element's top border, in pixels only. El valor predeterminado es 120 píxeles.Default is 120 pixels.

Ejemplo: top:140pxExample: top:140px
leftleft div, img, objectdiv, img, object La coordenada del eje x del borde izquierdo del elemento en píxeles únicamente.The x-axis coordinate of the element's left border, in pixels only. El valor predeterminado es 48 píxeles.Default is 48 pixels.

Ejemplo: left:95pxExample: left:95px
widthwidth div, imgdiv, img La anchura del elemento, en píxeles únicamente.The width of the element, in pixels only.

Ejemplo: width:480pxExample: width:480px
heightheight imgimg La altura del elemento, en píxeles únicamente.The height of the element, in pixels only. Para div, se calcula la altura en runtime y se omite cualquier valor de altura especificado.For divs, height is calculated at runtime and any specified height value is ignored.

Ejemplo: height:665pxExample: height:665px

Se ignoran otros atributos de posición, como z-index.Other position attributes, such as z-index, are ignored. Las imágenes con posición absolutas pueden usar el atributo data-render-src o src.Absolute positioned images can use either the data-render-src or src attribute.

Información de respuestaResponse information

La API de OneNote proporciona la siguiente información en la respuesta.The OneNote API returns the following information in the response.

Datos de respuestaResponse data DescripciónDescription
Código correctoSuccess code Un código de estado HTTP 201 para una solicitud POST correcta y un código de estado HTTP 204 para una solicitud PATCH correcta.A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
ErroresErrors Lea Códigos de error para API de OneNote de Microsoft Graph para obtener información sobre los errores de OneNote que puede devolver Microsoft Graph.Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

PermisosPermissions

Para crear o actualizar páginas de OneNote, necesita solicitar los permisos adecuados.To create or update OneNote pages, you'll need to request appropriate permissions. Seleccione el nivel inferior de permisos que necesita la aplicación para funcionar correctamente.Choose the lowest level of permissions that your app needs to do its work.

Permisos para páginas POSTPermissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Permisos para páginas PATCHPermissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

Para obtener más información sobre los ámbitos de permiso y cómo funcionan, consulte los ámbitos de permisos de OneNote.For more information about permission scopes and how they work, see OneNote permission scopes.

Vea tambiénSee also